在d3中引入路径间隙 [英] Introduce gap in path in d3
问题描述
我试图通过从文件中读取数据来使用d3js绘制路径。但是，那里也可以有NaN值。因此，在这些点上，我需要在图表中留出空隙。假设有5个点1,2,3,4,5，而我有1,2,4和5的值，但没有3。因此，应该有一条从1到2的路径和一条从4到5的路径。 / p>
我遇到了d3.line的已定义访问器，该访问器针对线元素执行此操作。关于如何使用路径实现相同的任何想法。
预先感谢
PS：我正在尝试这样的事情：
变量选择= d3.select（this）
.selectAll（'。my-series'）
.data（d）;
selection.enter（）
.append（'path'）;
仍然不确定我是否理解这个问题，但是我在下面编写了一个代码段，演示了如何使用 d3.line 的定义的访问器。在此代码中，如果 dx 或 dy 包含错误值，d3将分解路径线段：
<！DOCTYPE html>< html> < head> < script data-require = d3@4.0.0 data-semver = 4.0.0 src = https://d3js.org/d3.v4.min.js< / script> < / head> < body> < script> var svg = d3.select（'body'）.append（'svg'）.attr（'width'，200）.attr（'height'，200）; var x = d3.scaleLinear（）.range（[0,200]）.domain（[1,5]）; var y = d3.scaleLinear（）.range（[0,200]）.domain（[0，10]）; var data = [{x：1，y：Math.random（）* 10}，{x：2，y：Math.random（）* 10}，{x：false，y：false}，{x：4 ，y：Math.random（）* 10}，{x：5，y：Math.random（）* 10}]; var line = d3.line（）.x（function（d）{return x（dx）;}）.y（function（d）{return y（dy）;}）.defined（function（d）{return dy && dx;}）; svg.append（'path'）.style（'stroke'，'steelblue'）.style（'stroke-width'，2）.style（'fill'，'none'）.attr（'d'，line（数据））; < / script> < / body>< / html>
I am trying to plot a path using d3js by reading data from a file. However, there can be NaN values in there too. So, I need a gap in the graph at those points. Say there are 5 points 1,2,3,4,5 and I have values for 1,2,4 and 5 but not 3. So, there should be a path from 1 to 2 and a path from 4 to 5.
I came across a defined accessor for d3.line which does this for line elements. Any ideas as to how can I implement the same with a path.
Thanks in advance
PS: I am trying something like this:
var selection = d3.select(this)
.selectAll('.my-series')
.data(d);
selection.enter()
.append('path');
Still not sure I understand the question, but I've written a code snippet below that demonstrates how to use the defined accessor of d3.line. In this code, if either the d.x or d.y contain falsy values, d3 will "break-up" the path line segment:
<!DOCTYPE html>
<html>
<head>
<script data-require="d3@4.0.0" data-semver="4.0.0" src="https://d3js.org/d3.v4.min.js"></script>
</head>
<body>
<script>
var svg = d3.select('body')
.append('svg')
.attr('width', 200)
.attr('height', 200);
var x = d3.scaleLinear()
.range([0,200])
.domain([1,5]);
var y = d3.scaleLinear()
.range([0,200])
.domain([0, 10]);
var data = [
{
x: 1,
y: Math.random() * 10
},{
x: 2,
y: Math.random() * 10
},{
x: false,
y: false
},{
x: 4,
y: Math.random() * 10
},{
x: 5,
y: Math.random() * 10
}
];
var line = d3.line()
.x(function(d){
return x(d.x);
})
.y(function(d){
return y(d.y);
})
.defined(function(d){
return d.y && d.x;
});
svg.append('path')
.style('stroke', 'steelblue')
.style('stroke-width', 2)
.style('fill', 'none')
.attr('d', line(data));
</script>
</body>
</html>
这篇关于在d3中引入路径间隙的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
