D3js测量图 [英] D3js gauge graph

问题描述

我开始使用d3js http://d3js.org ，开始时我需要的是图标。
它显示多少时间的拍卖用完和在哪个国家拍卖。页面上会有更多的图标。
这里是小调 http://jsfiddle.net/TdWtC/

I'm getting started with d3js http://d3js.org and all I need at the beginning is gauge icon. It displays how many time of auction run out and in which state auction is. There will be more icons on page. Here is fiddle http://jsfiddle.net/TdWtC/

第一次加载是确定，但我需要帮助更新。在更新两个必须更新的背景和指针。主要的问题是在更新背景重叠指针。

First load is ok but I need help with update. On update both have to be updated background and pointer. The main problem is that on update background overlaps pointer. Probably I'm doing it totally wrong but I customized similar snippet and cannot move on.

这是背景重叠指针

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)" });

感谢您的帮助

推荐答案

问题是，你的乐队的乐队不包含在自己的 g 元素。任何更新的调用都会在 g 元素后面追加指针所在的频带，从而出现在其顶部。你可以通过将乐队放在自己的 g 元素中来修复这个问题，该元素附加在 g 之前的指针。

The problem is that you the bands of the gauge aren't contained in their own g element. Any calls to update append the bands after the g element for the pointer, thus appearing on top of it. You can fix this easily by putting the bands into their own g element that is appended before the g for the pointer.

我进行了这些更改此处并且还将你的代码d3化了一点 - 你不需要将带单独传递给d3，它可以照顾在同一时间绘制它们。注意，我只处理 .enter（）选择（即新元素），因为您不更改 update（） 呼叫。要使它适用于更改的数据，您需要为 .exit（）选择（删除元素，可能只是段）实现一个处理程序。 exit（）。remove（））和更新的选择（可能是你用来设置 .enter（） selection）。

I've made these changes here and also d3ified your code a bit -- you don't need to pass the bands individually to d3, it can take care of drawing them all at the same time. Note that I'm only handling the .enter() selection (i.e. new elements) as you're not changing any data in the update() calls. To make it work for changed data, you'd need to implement a handler for the .exit() selection (remove elements, probably simply segments.exit().remove()) and the updated selection (probably the code you're using to set the start and end angles for the .enter() selection).

这篇关于D3js测量图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！