gpt4 book ai didi

javascript - 绘制没有数据的 d3.js 线时出错

转载 作者:行者123 更新时间:2023-12-03 12:17:28 33 4
gpt4 key购买 nike

我有一个 d3.js 折线图,有多条线。用户可以更改与每条线关联的过滤器,这会更改绘制的值,并且图表会更新。

这一切都工作正常,但如果用户选择的过滤器导致一行没有匹配的值,我会在控制台中收到此错误:

Error: Invalid value for <path> attribute d=""          d3.js:8481
attrNull d3.js:8481
(anonymous function) d3.js:8653
d3_class.forEach d3.js:275
start d3.js:8652
(anonymous function) d3.js:8646
d3_timer_mark d3.js:2085
d3_timer_step d3.js:2065

用户可见的内容很好 - 图表更新时(显然)不会绘制线条。但我想摆脱这个错误!这是输入/更新/删除行的代码:

var line = g.selectAll('path.line')
.data(function(d) { return d; },
function(d) { return d.id; });

line.enter().append('path')
.attr('class', 'line')
.attr('id', function(d) { return lineCSSID(d.id); })
.style('stroke', function(d) { return d.color; });

line.data(function(d) { return d; })
.transition()
.attr('d', function(d) { return chartLine(d.values); });

line.exit().remove();

当调用 return ChartLine(d.values);d.values 为空数组时,会发生错误。我能做些什么来让它更优雅地失败吗?

如果它影响答案:用户可以再次更改该行的过滤器,如果这导致存在匹配的数据,则该行将被重新绘制。

最佳答案

在将数据添加到图表之前,我最终省略了任何没有数据的行。

例如,如果(我的问题中的代码之前的某个位置)我有类似的内容,其中 data是一组对象,每个对象代表图表上的一条线:

var svg = d3.select('.chart')
.selectAll('svg')
.data([data]);

在那之前我现在这样做:

data = data.filter(function(d){ return d.values.length > 0; });

这可确保任何没有数据点的线条不会传递到图表。

更新:我意识到,如果所有行都有导致没有匹配值的过滤器,那么在尝试计算domain时我会收到错误对于 x 轴。所以我现在得到了这样的东西:

if (data.length == 0) {
// We must have filtered out all the lines because none had any values.
// Fake an x-axis domain between 1 year ago and today.
var to = new Date(),
from = new Date(),
from.setFullYear(from.getFullYear() - 1);
xScale.domain([from, to]);

} else {
// Standard, set the x-axis domain as usual from min/max values of all lines.
...
};

xScale.range([0, width]);

关于javascript - 绘制没有数据的 d3.js 线时出错,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24615467/

33 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com