Question

我有一个Zoomable Sunburst图表，显示了电弧尺寸的奇怪问题。

我希望弧的大小与子的数量成比例（在工具提示中显示）。然而，我的父母很少有孩子，这个孩子比同龄孩子要多得多。弧形大小不反映儿童数量。我尝试了各种其他没有帮助的d3.scales。我做错了什么？

我的代码主要是来自D3示例的样板。

var width = 760, height = 700,
    radius = Math.min(width, height) / 2.25,
    color = d3.scale.category20c();

var x = d3.scale.linear().range([0, 2 * Math.PI]),
    y = d3.scale.sqrt().range([0, radius]);

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height)
    .append("g")
    .attr("transform", "translate(" + width / 2 + "," + height * .52 + ")");

var partition = d3.layout.partition()
    .value(function(d) { return 1; });

var arc = d3.svg.arc()
    .startAngle(function(d) { return Math.max(0, Math.min( 2 * Math.PI, x(d.x))); })
    .endAngle(function(d) { return Math.max(0, Math.min( 2 * Math.PI, x(d.x + d.x))); })
    .innerRadius(function(d) { return Math.max(0, y(d.y)); })
    .outerRadius(function(d) { return Math.max(0, y(d.y + d.dy)); });

var tooltip = d3.select("body")
    .append("div")
    .attr("class", "tooltip")
    .style("position", "absolute")
    .style("z-index", "10")
    .style("opacity", 0);

d3.json("data/getJson.php", function(error, data) {

var treeData = genJSON(data, ['Location', 'Provider', 'Diagnosis', 'Procedure']);

console.log(treeData);

var path = svg.selectAll("path")
    .data(partition.nodes(treeData))
    .enter().append("svg:path")
    .attr("d", arc)
    .style("fill-rule", "evenodd")
    .style("fill", function(d) { return color((d.children ? d : d.parent).name); }) 
    .on("click", click)

    .on("mouseover", function(d) {
          tooltip.html(function() {
              return (d.children ? d : d.parent).name + " (" + d.value + ")";
         });
          return tooltip.transition()
            .duration(50)
            .style("opacity", 0.9);
        })
        .on("mousemove", function(d) {
          return tooltip
            .style("top", (d3.event.pageY-10)+"px")
            .style("left", (d3.event.pageX+10)+"px");
        })
        .on("mouseout", function(){return tooltip.style("opacity", 0);});

  function click(d) {
    path.transition()
    .duration(750)
    .attrTween("d", arcTween(d));
  }

});

function arcTween(d) {
  var xd = d3.interpolate(x.domain(), [d.x, d.x + d.dx]),
      yd = d3.interpolate(y.domain(), [d.y, 1]),
      yr = d3.interpolate(y.range(), [d.y ? 20 : 0, radius]);
  return function(d,i) {
    return i
        ? function(t) { return arc(d); }
        : function(t) { x.domain(xd(t)); y.domain(yd(t)).range(yr(t)); return arc(d); };
  };
}

JSON嵌套了这个genJSON函数 - http://colinwhite.net/Sunburst/js/treeRemapper.js

感谢您提供任何帮助或建议。

Answer 1

更改分区调用，包括像这样的.sort（null） -

var partition = d3.layout.partition()
    .sort(null) //<-- was missing this
    .value(function(d) { return 1; });

似乎已经解决了奇怪的电弧尺度问题。

D3.js Sunburst不正确的弧度

1 个答案: