1

我正在将旧的 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 问题，包括在圆弧 d3js 内对齐文本和寻找在旭日形图上显示标签的方法（找不到工作示例），但我似乎无法使文本路径正常工作。如果可能的话，最好让标签呈放射状显示，因为我正在显示的文本（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 片段，以便内部节点可以显示其关联叶子的总大小。

最后，我不知道如何添加自己的颜色范围。

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

4

0 回答 0