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

Question

在 d3.js 中，可以使用语法 d.measure 访问数据集的部分内容，其中 d 访问数据属性，“measure”访问我们数据集中的特定字段。基于我在 bl.ocks.org 上找到的代码我创建了一个折线图。但是，我想以这样一种方式更改函数 dsLineChart()，以便我可以传递要用于可视化 y 轴上的值的列的名称，即 如何指定参数 dsLineChart(argument ) 确定要使用的列 例如d.measure2 而不是 d.measure。

请参阅下面的脚本。我拥有的数据集包含列“measure”、“measure2”、“measure3”和“measure4”，其中“measure”由 d.measure 可视化，但我想调用例如dsLineChart("measure2") 使用相同的函数，但用于另一列。

例如

• 数据集

---

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} ];

• 脚本

我已经创建了一个最小的工作脚本，可以在以下链接中找到 Fiddle D3js line chart

感谢@GerardoFurtado 的反馈，在下面的代码片段中提供了生成的脚本，并允许使用不同的参数调用函数 dsLineChart()，从而使用不同的度量值生成折线图，例如dsLineChart("measure2") 与 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

这里最“优雅”的解决方案，也可能是最惯用的解决方案，是嵌套您的数据，使所有行的 y 值属性可以具有相同的名称。

但是，这并不意味着您所要求的是不可能的:它肯定是。您可以指定传递给线生成器的比例(例如，查看 this answer )，以及每种方法使用的属性。

为此，我们首先声明一个变量:

var property;

这是我们将在行生成器中使用的变量:

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

现在，让我们获取真实属性。我在这里对它们进行硬编码，但您可以轻松地从数据中提取它们:

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

然后，我们将该数组绑定(bind)为数据:

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

现在是重要的部分:在回调中，您只需分配行生成器使用的 property 的值:

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

总而言之，这是您的代码以及这些更改:

// 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>