2

誰かの助け（ブランドン）のおかげで、サンバーストチャートにツールチップを追加することができました。サンバーストチャートにパスのラベルを表示する方法をまだ探しています（そして、デュアルモードのツールチップとテキストがあります）。

私が改善したい例はjsfiddle.net/trakkasure/UPqX5/で提供されています

次のコードセクションに追加するコードを探しています。

path = svg.data([getData()]).selectAll("path") 
    .data(partition.nodes)
    .enter().append("svg:path")  
    .attr("d", arc)  
    .style("fill", function(d) { return color((d.children ? d : d.parent).name); })  
    .on("click", magnify)  
    .on("mouseover", function(d) {  
    tooltip.show([d3.event.clientX,d3.event.clientY],'<div>'+d.name+'</div>  <div>'+d.value+'</div>')
    })  
    .on('mouseout',function(){  
    tooltip.cleanup()
    })              
    .each(stash);

そして、例に示されているラベルがhttp://bl.ocks.org/910126で提供されていることを確認したいと思います。その例をうまく機能させることができません（私はまだD3を初めて使用します）

そのグラフにはテキストが多すぎる可能性があることは認識していますが、私のシナリオでは問題ありません。

誰かがこれらすべてのラベルをチャートに表示する方法を理解するのを手伝ってもらえますか？

4

1 に答える 1

2

svg：text要素をキャンバスに追加するだけです。

path.append("svg:text")
  .attr("transform", function(d) { return "rotate(" + (d.x + d.dx / 2 - Math.PI / 2) / Math.PI * 180 + ")"; })
  .attr("x", function(d) { return d.y; })
  .attr("dx", "6") // margin
  .attr("dy", ".35em") // vertical-align
  .text(function(d) { return d.name; });

ただし、私の編集では、これによりmagnify関数が機能しなくなるため、パスとテキストの各ペアをまとめるsvgグループを作成します。私の意見では、要素はこのように整理されており、将来的にクエリが簡単になります。

関数を変更してテキストもアニメーション化する必要があることに注意してください。magnify現時点では、パスをアニメーション化してテキストを元の位置に残すだけです。

group = svg.data([getData()]).selectAll("path")
  .data(partition.nodes)
  .enter().append('svg:g');

//path variable is required by magnify function
path = group.append("svg:path")
  .attr("d", arc)
  .style("fill", function(d) { return color((d.children ? d : d.parent).name); })
  .on("click", magnify)
  .on("mouseover", function(d) {
    tooltip.show([d3.event.clientX,d3.event.clientY],'<div>'+d.name+'</div><div>'+d.value+'</div>')
  })
  .on('mouseout',function(){
    tooltip.cleanup()
  }) 
  .each(stash);

// you may need to assign the result to a variable, 
// for example to animate the text in your magnify function, 
// as shown in the path variable above
group.append("svg:text")
  .attr("transform", function(d) { return "rotate(" + (d.x + d.dx / 2 - Math.PI / 2) / Math.PI * 180 + ")"; })
  .attr("x", function(d) { return d.y; })
  .attr("dx", "6") // margin
  .attr("dy", ".35em") // vertical-align
  .text(function(d) { return d.name; });

コードは指定された例から取得されましたが、データ構造に基づいてテキストを適切に配置するためにx属性を編集しました（例ではを使用しています）。また、関数を変更して返すようにします.attr("x", function(d) { return d.y; })Math.sqrt(d.y)textd.name

これがjsFiddleです

于 2012-11-23T23:27:43.683 に答える