1

私はD3.jsを理解し始めています。1つのデータセットで1つのドットのセットを描画し、次に別のデータセットで別のドットのセットを描画する関数を作成したいと思います。

これを書きましたが、2番目のドットセットが最初のドットセットを上書きしています！selectAllドットが2セットになるように、それを使わずに書き直すにはどうすればよいですか？

function drawDots(mydata) { 
  focus.selectAll(".dot").data(mydata)
    .enter().append("circle")
    .attr("class", "dot")
    .attr("cx", line.x())
    .attr("cy", line.y())
    .attr("r", 3.5);
}
drawDots(data[0]);
drawDots(data[1]);

.enter()（注：これは単純化です。基本的に、関数呼び出しでの使用方法を知りたいです。）

4

2 に答える 2

2

2セットのデータに異なるクラス名を付ける必要があります。現在、両方に同じクラス（ ".dot"）のタグが付けられていますが、それらが異なるセットを表す場合は、それらを区別できる必要もあります。例えば：

function drawDots(mydata, name) { 
  focus.selectAll(".dot"+"."+name).data(mydata)
    .enter().append("circle")
    .attr("class", "dot" + " " + name)
    .attr("cx", line.x())
    .attr("cy", line.y())
    .attr("r", 3.5);
}
drawDots(data[0], "set1");
drawDots(data[1], "set2");
于 2012-08-14T17:28:54.710 に答える
1

フォースグラフの作成にはd3jsのみを使用しましたが、あなたの場合、最初にノードを視覚化に追加し、次にenter（）を呼び出してから、グラフの内容をフェッチする必要があると思います。 

function drawDots(mydata) 
{ 
  myD3Object.nodes(myData).start();
  focus.selectAll(".dot").data(myD3Object.nodes())
  .enter().append("circle")
  .attr("class", "dot")
  .attr("cx", line.x())
  .attr("cy", line.y())
  .attr("r", 3.5);
}
于 2012-08-14T17:25:47.057 に答える