如何将数据列指定为行生成器中使用的属性？

Question

In d3.js it is possible to access parts of a dataset by using the syntax d.measure with d accessing the data property and "measure" accessing a specific field in our dataset. Based on the code I found on bl.ocks.org I created a line chart. I however wanted to alter the function dsLineChart() in such a way that I can pass the name of the column that I want to use for visualising the values on the y-axis, ie how to specify an argument dsLineChart(argument) that determines the column to use egdmeasure2 instead of d.measure.

See below for the script. The dataset I have contains the columns "measure", "measure2", "measure3" and "measure4" of which "measure" is visualised by d.measure, but I want to call eg dsLineChart("measure2") to use the same function but for another column.

eg

• Dataset

---

var data =  [
{group:"All",category:2011,measure:28107,measure2:53301,measure3:89015.40,measure4:138394},
{group:"All",category:2012,measure:39400,measure2:7001, measure3:55550.50,measure4:18004},
{group:"All",category:2013,measure:33894,measure2:690597,measure3:68289.50,measure4:17455},
{group:"All",category:2014,measure:55261,measure2:7172,measure3:73380.93,measure:418143} ];

• Script

I have created a minimal working script that can be found on the following link Fiddle D3js line chart

Thanks to the of feedback @GerardoFurtado the resulting script is provided in below snippet and allows for calling the function dsLineChart() with different arguments resulting in linecharts using different measures eg dsLineChart("measure2") vs. dsLineChart("measure").

 // dataset var lineChartData = [{ category: 2011, measure: 28107, measure2: 53301, measure3: 89015.40, measure4: 138394 }, { category: 2012, measure: 39400, measure2: 7001, measure3: 55550.50, measure4: 18004 }, { category: 2013, measure: 33894, measure2: 690597, measure3: 68289.50, measure4: 17455 }, { category: 2014, measure: 55261, measure2: 7172, measure3: 73380.93, measure: 418143 } ]; // layout var margin = { top: 20, right: 10, bottom: 0, left: 50 }, width = 350 - margin.left - margin.right, height = 250 - margin.top - margin.bottom; // function to draw linechart function dsLineChart(selMeasure) { //convert object to array var data = d3.values(lineChartData); var property; var measures = [selMeasure]; var xScale = d3.scaleLinear() .domain([0, data.length - 1]) .range([0, width]); var yScale = d3.scaleLinear() .domain([0, d3.max(data, function(d) { return d[selMeasure]; })]) .range([height, 0]) .range([height, 0]); var line = d3.line() .x(function(d, i) { return xScale(i); }) .y(function(d) { return yScale(d[property]); }); var svg = d3.select("#lineChart").append("svg") .attr("width", width + margin.left + margin.right) .attr("height", height + margin.top + margin.bottom) .attr("position", "absolute") .attr("top", "10px") .attr("left", "410px") var plot = svg .append("g") .attr("transform", "translate(" + margin.left + "," + margin.top + ")") .attr("id", "lineChartPlot"); var paths = plot.selectAll(null) .data(measures) .enter() .append("path") .attr("class", "line") .attr("d", function(d) { property = d; return line(data) }) .attr("stroke", "lightgrey") .attr("fill", "none") .attr("stroke-width", "4px"); } dsLineChart("measure2"); 

 <script src="https://d3js.org/d3.v4.min.js"></script> <div id="lineChart"></div> 

Answer 1

The most "elegant" solution here, and probably the most idiomatic one, is nesting your data, in such a way that the y value property can have the same name for all lines.

However, this doesn't mean that what you're asking is not possible: it certainly is. You can specify what scale you pass to the line generator (for instance, have a look at this answer ), and what property you use for each method.

For this to work, we'll first declare a variable:

var property;

That's the variable we'll use in the line generator:

var line = d3.line()
    .x(function(d, i) {
        return xScale(i);
    })
    .y(function(d) {
        return yScale(d[property]);
    });

Now, let's get the real properties. Here I'm hardcoding them, but you can easily extract them from the data:

var measures = ["measure", "measure2", "measure3", "measure4"];

Then, we bind that array as data:

var paths = plot.selectAll(null)
    .data(measures)
    .enter()
    .append("path")

Now comes the important part: in the callback, you simply assign the value of property , which is used by the line generator:

.attr("d", function(d) {
    property = d;
    return line(data)
})

All together, here is your code with those changes:

 // dataset var data = [{ group: "All", category: 2011, measure: 28107, measure2: 53301, measure3: 89015.40, measure4: 138394 }, { group: "All", category: 2012, measure: 39400, measure2: 7001, measure3: 55550.50, measure4: 18004 }, { group: "All", category: 2013, measure: 33894, measure2: 690597, measure3: 68289.50, measure4: 17455 }, { group: "All", category: 2014, measure: 55261, measure2: 7172, measure3: 73380.93, measure: 418143 } ]; var property; var measures = ["measure", "measure2", "measure3", "measure4"]; // layout var margin = { top: 20, right: 10, bottom: 0, left: 50 }, width = 350 - margin.left - margin.right, height = 250 - margin.top - margin.bottom; // function to draw linechart function dsLineChart() { var firstDatasetLineChart = data var xScale = d3.scaleLinear() .domain([0, firstDatasetLineChart.length - 1]) .range([0, width]); var yScale = d3.scaleLinear() .domain([0, d3.max(firstDatasetLineChart, function(d) { return d.measure; })]) .range([height, 0]) .range([height, 0]); var line = d3.line() .x(function(d, i) { return xScale(i); }) .y(function(d) { return yScale(d[property]); }); var svg = d3.select("#lineChart").append("svg") .attr("width", width + margin.left + margin.right) .attr("height", height + margin.top + margin.bottom) .attr("position", "absolute") .attr("top", "10px") .attr("left", "410px") var plot = svg .append("g") .attr("transform", "translate(" + margin.left + "," + margin.top + ")") .attr("id", "lineChartPlot"); var paths = plot.selectAll(null) .data(measures) .enter() .append("path") .attr("class", "line") .attr("d", function(d) { property = d; return line(data) }) .attr("stroke", "lightgrey") .attr("fill", "none") .attr("stroke-width", "4px"); } dsLineChart(); 

 <script src="https://d3js.org/d3.v4.min.js"></script> <div id="lineChart"></div>