Question

我正在将较旧的Rails / Protovis站点迁移到Django和D3.js.我使用Protovis sunburst的修改版本（http://mbostock.github.com/protovis/ex/sunburst.html - 我的代码见http://www.eafsd.org/assignments_sunbursts）并想在D3.js中使用sunburst示例（http://bl.ocks.org/4063423）重新创建它基线，但我遇到了一个墙上贴有弧线的标签。

我已经查看了其他几个SO问题，包括Aligning text inside circular arc d3js和Looking for a way to display labels on sunburst chart (could not find a working example)，但我似乎无法使文本路径起作用。如果可能的话，将标签显示为径向显示是很好的，因为我正在展示的文字（18世纪外交头衔）可能会很长。

我尝试了以下代码示例：

  d3.json("../assignment-by-type.json", function(error, root) {
      var path = svg.datum(root)
          .selectAll("path")
          .data(partition.nodes)
         .enter()
          .append("path")
          .attr("display", function(d) {
              return d.depth ? null : "none";
          }) // hide inner ring
          .attr("d", arc)
          .style("stroke", "#fff")
          .style("fill", function(d) {
              return color((d.children ? d : d.parent).name);
          })
          .style("fill-rule", "evenodd")
          .each(stash);

      /* my additions begin here */

      path.append("title")
          .text(function(d) {return d.name + ": " + d.size});

      path.append("text")
          .attr("dy", ".3em")
          .style("text-anchor", "middle")
          .append("textpath")
          .attr("class", "textpath")
          .attr("xlink:href", "#path")
          .text(function(d) { return d.name });

      /* end of what I've added, back to the example code*/

      d3.selectAll("input").on("change", function change() {
          var value = this.value === "count"
                ? function() { return 1; }
                : function(d) { return d.size; };

          path.data(partition.value(value).nodes)
              .transition()
              .duration(1500)
              .attrTween("d", arcTween);
      });
    });

旭日显示和标题显示在鼠标悬停上（尽管内环没有尺寸功能，因此它返回为未定义）。

我想要做的其他两个修改：我找不到D3js片段，它显示了如何递归计算包大小，以便内部节点可以显示其关联叶的总大小。

最后，我无法弄清楚如何添加自己的颜色范围。

我非常感谢你的时间。非常感谢。

用D3.js重现Protovis Sunburst标签

0 个答案: