D3 - Making Stroke-width Covary With Second Data Set
I'm building a pretty straightforward multi-line chart measuring values over time using a .tsv dataset. I want to incorporate a second .tsv that will change the stroke-width of ea
Solution 1:
Regardless of whether you're going to combine into a JSON file or a single TSV, I would highly recommend joining the two files. Apart from making data access less confusing, you'll also need only a single load call instead of two nested ones. So instead of something like
d3.tsv("1.tsv", function(error1, data1) {
d3.tsv("2.tsv", function(error2, data2) {
// ...
something.selectAll("path")
.data(data1).enter()
.append("path")
.style("stroke-width", function(d, i) { return data2[i].z; })
.attr("d", function(d) { return d.y; });
});
});
you could do something like
d3.tsv("1.tsv", function(error, data) {
// ...
something.selectAll("path")
.data(data1).enter()
.append("path")
.style("stroke-width", function(d) { return d.z; })
.attr("d", function(d) { return d.y; });
});
Note that you won't be able to vary the stroke width of a line in SVG though. That is, each path
has a width that you can't change dynamically. To achieve this, you would need to break up the line into separate segments or create a filled path that simulates a line of varying width.
Post a Comment for "D3 - Making Stroke-width Covary With Second Data Set"