1

折れ線グラフを更新する最良の方法を探しています。着信データは「新しい」ものではなく、多くの異なるデータ セットを切り替えているだけです。私の問題は、 .append('path') が単に機能していないことです。その理由はわかりません。グループ化に関係している可能性があります。軸とラベルが切り取られないように、グラフの周りに余白を配置するのが好きです。これを行うには、私の HTML は次のようになります...

<svg w, h id='svg-container'>
  <g translate(w - margin, h - margin) id='chart-container'>
    <g id='x-axis'>
    <g id='y-axis'>

chart-container私のコードでは、を選択して追加したいと思います<path d='...' id='line'>。select('chart-container').select('path')後でグラフを更新するときに、その選択を簡単に更新できるようにしたいと考えています。

チャートの初期設定:

var svgContainer = d3.select(element[0]).append('svg')
    .attr({
        width: width + margin.left + margin.right,
        height: height + margin.top + margin.bottom
    })
    .classed('svg-container', true);

var chartContainer = svgContainer.append('g')
  .classed('chart-container', true)
  .attr('transform', "translate(" + margin.left + "," + margin.top + ")");

chartContainer.append('path')
 .data(activeData)
 .attr('d', lineFunc)
 .attr('stroke', 'blue')
 .attr('stroke-width', 
 .attr('fill', 'none');

後でチャートを更新します。

svgContainer = d3.select('#line-container').select('.svg-container')
    .attr({
        width: width + margin.left + margin.right,
        height: height + margin.top + margin.bottom
    });

chartContainer = svgContainer.select('.chart-container')
    .attr('transform', "translate(" + margin.left + "," + margin.top + ")");

chartContainer.select('path')
     .data(activeData)
     .attr('d', lineFunc)
     .attr('stroke', 'blue')
     .attr('stroke-width', 
     .attr('fill', 'none');

残念ながら、これは機能しません。その理由はわかりません。イニシャルchartContainer.append('path')は (時々) 機能しているように見えますが、chartContainer.select('path')実際には正しいアイテムが返されません (それ以外の場合もあります)。d3 が軸グループをトラバースし、それらのパスの 1 つを返している可能性がありますか? 私はこれについて間違った方法で進んでいますか？

4

1 に答える 1

1

完全なコードは表示されませんが、説明からすると、間違ったパスを選択しているように思えます。これを回避する 1 つの方法は、必要なパスに特別なクラスを割り当て、それに応じて選択することです。

chartContainer.append("path")
    .attr("class", "chart");

chartContainer.select("path.chart");

.data()もう 1 つの問題は、DOM 要素にバインドされたデータを、実際に使用しているように更新するために使用できないことです。.datum()代わりに使用してください。

chartContainer.select('path')
    .datum(activeData);
于 2013-09-24T21:47:40.190 に答える