在D3.js图形中添加点 [英] Adding dots to D3.js graph
问题描述
我是D3的新手，需要创建一个包含两个数据集的图形.
I am a novice to D3, and need to create a graph of two data sets.
在修改了我发现的此://stackoverflow.com/questions/13689821/d3js-creating-and-easily-updating-a-multi-line-chart?rq=1>此处，并且能够使我的JSON数据正常工作，但无法将点或笔画合并到我的版本中.
I was able to create this, after adapting code that I found here, and was able to make things work with my JSON data, but have not been able to incorporate dots or the stroke into my version.
我试图以与"lines"变量相同的方式制作一个"dots"变量:
I tried to make a "dots" variable in the same fashion as the "lines" variable:
var dots = canvas.selectAll(".dot")
.data(dataArray, function(d){ return line(d.values);})
.enter()
.append("circle")
.attr("class", "dot")
.attr("cx", line.x())
.attr("cy", line.y())
.attr("r", 3.5);
，但是在访问我的代码中的单个数据数组时遇到了问题.
but ran into problems with what appears to be accessing the individual data arrays in my code.
感谢您的帮助，我的完整代码如下:
Any help is appreciated, my entire code is below:
<!DOCTYPE html>
<html>
<head>
<style>
body {
font: 10px sans-serif;
}
.axis path, .axis line {
fill: none;
shape-rendering: crispEdges;
}
.line {
}
.area {
fill: steelblue;
opacity: 0.5;
}
.dot {
fill: steelblue;
stroke: steelblue;
stroke-width: 1.5px;
}
</style>
</head>
<body>
<div id="disp"></div>
<script src="https://d3js.org/d3.v3.min.js"></script>
<script>
var dataArray = [
{
category: 'red',
values: [0, 4, 9, 4, 4, 7]
},
{
category: 'blue',
values: [0, 10, 7, 1, 1, 11]
}
];
var canvas = d3.select('#disp')
.append('svg')
.attr('width', 400)
.attr('height', 200);
var x = d3.scale.linear()
.domain([0, 8])
.range([0, 700]);
var y = d3.scale.linear()
.domain([0, 20])
.range([200, 0]);
var line = d3.svg.line()
.interpolate("cardinal")
.x(function(d, i) { return x(i); })
.y(function(d, i) { return y(d); });
var area = d3.svg.area()
.interpolate("cardinal")
.x(line.x())
.y1(line.y())
.y0(y(0));
var lines = canvas.selectAll('.line')
.data( dataArray, function(d) { return d.category; } );
lines.enter()
.append('path')
.attr('class', 'line')
.attr("d", function(d) { return line(d.values);})
.style("stroke", function(d) {return d.category;})
.attr("class", "area")
.style("fill", function(d) {return d.category;})
.attr("d", function(d) { return area(d.values);});
</script>
</body>
</html>
推荐答案
将图形分成3个所需的部分:一个填充区域，一个顶部的线(具有不同的不透明度)，然后是一个圆形集合.这是一些已注释且可运行的代码:
Break your graph up into the 3 things you want, a filled area, a line on top (of different opacity) and then a collection of circles. Here's some commented and run-able code:
<!DOCTYPE html>
<html>
<head>
<style>
body {
font: 10px sans-serif;
}
.axis path,
.axis line {
fill: none;
shape-rendering: crispEdges;
}
.line {
fill: none;
stroke-width: 3px;
}
.area {
fill: steelblue;
opacity: 0.5;
}
.dot {
fill: steelblue;
stroke: steelblue;
stroke-width: 1.5px;
}
</style>
</head>
<body>
<div id="disp"></div>
<script src="//d3js.org/d3.v3.min.js"></script>
<script>
var dataArray = [{
category: 'red',
values: [0, 4, 9, 4, 4, 7]
},
{
category: 'blue',
values: [0, 10, 7, 1, 1, 11]
}
];
var canvas = d3.select('#disp')
.append('svg')
.attr('width', 400)
.attr('height', 200);
var x = d3.scale.linear()
.domain([0, 8])
.range([0, 700]);
var y = d3.scale.linear()
.domain([0, 20])
.range([200, 0]);
var line = d3.svg.line()
.interpolate("cardinal")
.x(function(d, i) {
return x(i);
})
.y(function(d, i) {
return y(d);
});
var area = d3.svg.area()
.interpolate("cardinal")
.x(line.x())
.y1(line.y())
.y0(y(0));
var lines = canvas.selectAll('.category')
.data(dataArray, function(d) {
return d.category;
});
// on enter append a g to hold our 3 parts
var lE = lines.enter()
.append('g')
.attr('class', 'category')
// append a path that's our solid line on top of the area
lE.append("path")
.attr('class', 'line')
.attr("d", function(d) {
return line(d.values);
})
.style("stroke", function(d) {
return d.category;
})
//apend a path that's our filled area
lE.append("path")
.attr("class", "area")
.style("fill", function(d) {
return d.category;
})
.attr("d", function(d) {
return area(d.values);
});
// create a subselection for our "dots"
// and on enter append a bunch of circles
lE.selectAll(".dot")
.data(function(d){
return d.values
})
.enter()
.append("circle")
.attr("r", 3)
.attr("cx", function(d,i){
return x(i);
})
.attr("cy", function(d){
return y(d);
})
.attr("fill", function(d){
return d3.select(this.parentNode).datum().category;
});
</script>
</body>
这篇关于在D3.js图形中添加点的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
