3

この画像に示すように、これらの青い弧を動的に作成する d3 プロジェクトの最後のビットを完成させようとしています。その上に弧のテキストを配置する必要があります。

ここに画像の説明を入力

上の画像は、アーク テキストを静的に配置して試行錯誤して作成したものですが、テキストの下にある青いアークに基づいて動的に配置したいと考えています。これは、円弧を動的に作成するコードです。

var groupData = data_group.selectAll("g.group")
    .data(nodes.filter(function(d) { console.log(d.__data__.key); return (d.key=='Employers' ||{exp:channel:entries category="13" backspace="2"} d.key == '{url_title}' ||{/exp:channel:entries}) && d.children; }))
    .enter().append("group")
    .attr("class", "group");

arc_group.selectAll("g.arc")
    .data(groupData[0])
    .enter().append("svg:path")
    .attr("d", groupArc)
    .attr("class", "groupArc")
    .style("fill", "#1f77b4")
    .style("fill-opacity", 0.5);

{exp:} コンテンツは、表現エンジンでコンテンツ管理システムから取得している、事前に解析されたデータです。

だから、私は自分の弧を持っています。これで、groupData コード ブロックに console.log ステートメントがあることがわかります。これにより、アーク テキストに表示する名前が得られます。

console.log(d.__data__.key);

さて、円弧テキストを静的に配置するために使用していたコードは次のとおりです。

var arcData = [
  {aS: 0, aE: 45,rI:radius - chartConfig.linePadding + chartConfig.arcPadding,rO:radius - chartConfig.linePadding + chartConfig.textPadding-chartConfig.arcPadding}
];

var arcJobsData = d3.svg.arc().innerRadius(arcData[0].rI).outerRadius(arcData[0].rO).startAngle(degToRad(1)).endAngle(degToRad(15));
var g = d3.select(".chart").append("svg:g").attr("class","arcs");
var arcJobs = d3.select(".arcs").append("svg:path").attr("d",arcJobsData).attr("id","arcJobs").attr("class","arc");
g.append("svg:text").attr("x",3).attr("dy",15).append("svg:textPath").attr("xlink:href","#arcJobs").text("JOBS").attr("class","arcText"); //x shifts x pixels from the starting point of the arc. dy shifts the text y units from the top of the arc

上記のコードでは、ID をアークに動的に割り当て、xlink:href 属性でその ID を参照し、text("JOBS") をテキストに置き換える必要があるだけです。 d からプルします。data__key. アークを動的に作成する上記のコードと、d.__data .key を使用してアークに配置するテキストを動的に作成および取得する方法を知っているとすれば、この作業を完了することができるはずですが、データを取得してアークに配置するコードを d3 に記述する方法がわかりません。誰でもこれを手伝ってもらえますか？

4

2 に答える 2

6

ネストされた選択に関するこのブログ投稿を読んでください。私はそれがあなたがやろうとしていることを説明すると信じています。

これが要点です。選択にデータを追加するときは、選択を変数に割り当てます。

var g = data_group.selectAll("g.group")
    .data(nodes.filter(function(d) { /* stuff */ }));

そうすれば、選択にバインドされたデータの単一要素を受け取るサブgセレクションを実行できます。これを使用して、円弧とテキストを追加できます。

g.enter().append('group') // Question: Are you sure you mean 'group' here?
    .attr('class', 'group')

g.selectAll('g.arc')
    .data(function(d, i) { return d; })
  enter().append('path')
     // Setup the path here

g.selectAll('text')
    .data(function(d, i) { return d; })
  .enter().append('text')
    .attr('text', function(d) { return d.__data__.key })

ネストされたセレクション (つまりg.selectAll()s)でデータ バインディングを行うために使用されている関数には、 にアタッチされたデータの 1 つの要素が渡されており、そのインデックスです。gdi

于 2013-01-05T17:15:51.550 に答える
1

これを理解しました。物事の構造を少し変更したので、もう少し意味がありましたが、本質的に私がしたことは次のとおりです。

var groupData = data_group.selectAll("g.group")
    .data(nodes.filter(function(d) { return (d.key=='Employers' ||{exp:channel:entries category="13" backspace="2"} d.key == '{url_title}' ||{/exp:channel:entries}) && d.children; }))
    .enter().append("group")
    .attr("class", "group"); //MH - why do we need this group - these elements are empty. Shouldn't this just be an array? Find out how to delete the svg elements without getting rid of the data, which is needed below.


  var groupArc = d3.svg.arc()
    .innerRadius(ry - 177)
    .outerRadius(ry - 157)
    .startAngle(function(d) { return (findStartAngle(d.__data__.children)-2) * pi / 180;})
    .endAngle(function(d) { console.log(d.__data__.key); return (findEndAngle(d.__data__.children)+2) * pi / 180});

  var arc_and_text = arc_group.selectAll("g.arc")
    .data(groupData[0])
    .enter().append("svg:g")
    .attr("class","arc_and_text");

  var arc_path = arc_and_text.append("svg:path")
    .attr("d", groupArc)
    .attr("class", "groupArc")
    .attr("id", function(d, i) { return "arc" + i; })
    .style("fill", "#1f77b4")
    .style("fill-opacity", 0.5); //MH: (d.__data__.key) gives names of groupings

  var arc_text = arc_and_text.append("text")
    .attr("class","arc_text")
    .attr("x", 3)
    .attr("dy", 15);

  arc_text.append("textPath")
    .attr("xlink:href", function(d, i) { return "#arc" + i; })
    .attr("class","arc_text_path")
    .style("fill","#ffffff")
    .text(function(d, i) { return d.__data__.key; });

D3 はまだ私を少し当惑させます。このコードはもっと改善できると確信していますが、うまくいきます。

于 2013-01-05T17:16:18.590 に答える