javascript - D3js 仪表图

Question

我正在开始使用 d3js http://d3js.org我一开始需要的只是仪表图标。显示拍卖已用完多少时间以及拍卖处于何种状态。页面上将会有更多图标。这是 fiddle http://jsfiddle.net/TdWtC/

首次加载没问题，但我需要更新方面的帮助。更新时，必须更新背景和指针。主要问题是更新背景时指针重叠。也许我做的完全错误，但我定制了类似的代码片段并且无法继续。

这是背景与指针重叠的部分

this.body.append("svg:path")
        .style("fill", color)
        .attr("d", d3.svg.arc()
        .startAngle(this.valueToRadians(start))
        .endAngle(this.valueToRadians(end))
        .innerRadius(0.4 * this.config.raduis)
        .outerRadius(this.config.raduis))
        .attr("transform", function() { return "translate(" + self.config.cx + ", " + self.config.cy + ") rotate(270)" });

感谢帮助

Answer 1

问题是仪表的带区未包含在其自己的 g 元素中。任何对 update 的调用都会将带区附加到指针的 g 元素之后，从而出现在其顶部。您可以通过将带区放入其自己的 g 元素(该元素附加在指针的 g 之前)来轻松解决此问题。

我已进行这些更改 here并且还对您的代码进行了一些 d3 化——您不需要将带区单独传递给 d3，它可以同时绘制所有带区。请注意，我只处理 .enter() 选择(即新元素)，因为您没有更改 update() 调用中的任何数据。为了使其适用于更改的数据，您需要为 .exit() 选择实现一个处理程序(删除元素，可能只是 segments.exit().remove() code>)和更新的选择(可能是您用来设置 .enter() 选择的开始和结束 Angular 代码)。