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中，v4中的行生成器d3.line()或v3中的d3.svg.line() ...

为给定的数组数据生成一行。（强调我的）

因此，您必须更改数据结构，其中每个数据点是数组内的元素（如对象）。

例如，像这样：

＆＃13;

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)

＆＃13;

然后，您可以使用它来生成该行。

另外一个问题：您的线路生成器不正确，方法名为x和y。

以下是包含这些更改的演示：

＆＃13;

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);

＆＃13;

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

＆＃13;

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

＆＃13;

d3读取数据列表语法

1 个答案: