0

我正在使用 D3js，并且绘制了一个像这样工作的图表（编辑：使用 JSON 数据的新小提琴）

我实际上正在为我的数据使用外部 JSON 文件。

var data=[{name:'fruits', value:2},{name:'veggies', value:3},{name:'milk', value:5},{name:'empty', value:0}];

我的问题是，当我在另一个具有不同分辨率的系统中打开文件时，我正在绘制的线向后工作。我认为问题是由于不同的分辨率或可能是因为其他原因。有人可以帮我解决这个问题。

提前致谢...

4

2 回答 2

4

我不确定您从哪里获得您正在使用的笔划破折号转换版本的代码，但我可以看到为什么它会在某些浏览器中产生异常行为：

path1.attr("stroke-dasharray", totalLength + " " + totalLength)
 .attr("stroke-dashoffset", totalLength)
 .transition()
 .duration(duration)
 .ease("linear")
 .attr("stroke-dashoffset", 0);

您正在定义一个破折号图案，该图案由一条实线组成的整个线条长度，后跟一个也是线条长度的间隙，最初偏移线条的长度并过渡到零偏移。有了这些信息，并且不幸的是，规范中对stroke-dashoffset 属性的模糊定义（“'stroke-dashoffset'指定了到破折号图案的距离以开始破折号”），我真的不知道应该是什么结果.

尝试使用：

path1.attr("stroke-dasharray", 0 + " " + totalLength)
 .transition()
 .duration(duration)
 .ease("linear")
 .attr("stroke-dasharray",  totalLength + " " + 0);

这告诉它以零长度的破折号和路径的整个长度的间隙开始，并过渡到在路径的整个长度上具有破折号和零长度的间隙。我没有 Linux 来测试它，但我怀疑它应该可以在任何地方工作。

于 2014-02-13T01:58:23.210 回答
0

我遇到了同样的问题并通过添加这行代码来解决它：

data.sort(function(a, b){ return d3.descending(a.foo, b.foo); });

或者

data.sort(function(a, b){ return d3.ascending(a.foo, b.foo); });

这将对您的数据进行降序或升序排序，强制动画以不同的方向运行，具体取决于哪个适合您。

于 2014-03-13T18:57:06.733 回答