javascript - d3 读取数据列表语法

Question

我正在尝试使用一些格式如下的数据制作折线图:

{state: 'New York', value:{year_2000: 1000, year_2001: 20000}

您如何引用此数据中的年份？

var year = [2000, 2001];

var xScale = d3.scale.ordinal()
    .domain(year)
    .rangeRoundPoints([0, 100]);

var yScale = d3.scale.linear()
    .domain([0, d3.max(data, function(d){
       return d.value;
    })])
    .range([0, 100]);

var xAxis = d3.svg.axis()
    .scale(xScale)
    .orient("bottom")
    .tick(0);

var yAxis = d3.svg.axis()
    .scale(yScale)
    .orient("left")
    .tick(10);

var valueLine = d3.svg.line()
    .xScale(function(d) { return xScale(year); })
    .yScale(function(d) { return yScale(d.value); })

我认为 valueline 设置有误。我想知道如何引用年份和相应的值来完成折线图。谢谢

Answer 1

简单地说:您不能使用该数据结构。

在 D3 中，线生成器 d3.line() 在 v4 或 d3.svg.line() 在 v3...

Generates a line for the given array of data. (emphasis mine)

因此，您必须更改数据结构，其中每个数据点 是数组中的一个元素(例如对象)。

例如，像这样:

var data = {
  state: 'New York',
  value: {
    year_2000: 1000,
    year_2001: 20000
  }
};

var newValue = [];
for(var key in data.value){
	newValue.push({year: key.split("_")[1], value: data.value[key]})
};

data.value = newValue;

console.log(data)

然后，您可以使用它来生成线条。

另外一个问题:你的线生成器不正确，方法被命名为x和y。

这是带有这些更改的演示:

var svg = d3.select("svg")

var data = {
  state: 'New York',
  value: {
    year_2000: 1000,
    year_2001: 20000
  }
};

var newValue = [];
for (var key in data.value) {
  newValue.push({
    year: key.split("_")[1],
    value: data.value[key]
  })
};

data.value = newValue;

var xScale = d3.scale.ordinal()
  .domain(data.value.map(function(d) {
    return d.year
  }))
  .rangeRoundPoints([80, 280]);

var yScale = d3.scale.linear()
  .domain([0, d3.max(data.value, function(d) {
    return d.value;
  })])
  .range([120, 10]);

var xAxis = d3.svg.axis()
  .scale(xScale)
  .orient("bottom");

var yAxis = d3.svg.axis()
  .scale(yScale)
  .orient("left")
  .ticks(5);

var valueLine = d3.svg.line()
  .x(function(d) {
    return xScale(d.year);
  })
  .y(function(d) {
    return yScale(d.value);
  });

svg.append("path")
  .datum(data.value)
  .attr("d", valueLine)
  .attr("fill", "none")
  .attr("stroke", "teal")
  .attr("stroke-width", 2);

svg.append("g")
  .attr("class", "axis")
  .attr("transform", "translate(0,120)")
  .call(xAxis);

svg.append("g")
  .attr("class", "axis")
  .attr("transform", "translate(80,0)")
  .call(yAxis);

.axis line,
.axis path {
  fill: none;
  stroke: black;
  shape-rendering: crispEdges;
}

<script src="https://d3js.org/d3.v3.min.js"></script>
<svg></svg>