Question

鉴于以下数据数组，如何使用d3在图表上显示此数据，类似于提供的示例。

数据

我的数据包含在一个对象数组中，如下所示：

[
  {
    "key": "Brazil",
    "value": 2
  },
  {
    "key": "Denmark",
    "value": 4
  },
  {
    "key": "Sweden",
    "value": 8
  },
  {
    "key": "Japan",
    "value": 10
  },
  {
    "key": "Russia",
    "value": 14
  }
]

结束目标

我的目标是：

我尝试了什么

我想最重要的是到目前为止我的代码：

<!DOCTYPE html>
<meta charset="utf-8">
<style> /* set the CSS */

.line {
  fill: none;
  stroke: steelblue;
  stroke-width: 3px;
}
</style>
<body>

<!-- load the d3.js library -->
<script src="https://d3js.org/d3.v4.min.js"></script>
<script>

var dataset = [
  {
    "key": "Brazil",
    "value": 2
  },
  {
    "key": "Denmark",
    "value": 4
  },
  {
    "key": "Sweden",
    "value": 8
  },
  {
    "key": "Japan",
    "value": 10
  },
  {
    "key": "Russia",
    "value": 14
  }
];


// set the dimensions and margins of the graph
var margin = {top: 20, right: 20, bottom: 30, left: 50},
    width = 960 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;

// set the ranges
var x = d3.scaleLinear().range([0, width]);
var y = d3.scaleLinear().range([height, 0]);

// define the line
var valueline = d3.line()
    .x(function(d) { return x(width / dataset.length); })
    .y(function(d) { return y(d.value); });

// append the svg obgect to the body of the page
// appends a 'group' element to 'svg'
// moves the 'group' element to the top left margin
var svg = d3.select("body").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
  .append("g")
    .attr("transform",
          "translate(" + margin.left + "," + margin.top + ")");


function draw(data) {

    data.forEach(function(d) {
        d.key = d.key.toString();
        d.value = +d.value;
    });

    data.sort(function(a, b){
      return a["value"]-b["value"];
    })

  // Scale the range of the data
  x.domain(d3.extent(data, function(d) { d.key; }));
  y.domain([0, d3.max(data, function(d) { return d.value; })]);

  // Add the valueline path.
  svg.append("path")
      .data(data)
      .attr("class", "line")
      .attr("d", valueline);

  svg.append("g")
      .attr("transform", "translate(0," + height + ")")
      .call(d3.axisBottom(x));

  // Add the Y Axis
  svg.append("g")
      .call(d3.axisLeft(y));
  }

  // trigger render
  draw(dataset);

</script>
</body>

问题在哪里（我认为）

此代码是我在过去几天看到的几个示例的合并，但它们似乎都针对仅包含数字和/或日期的数据模型，例如沿x轴的日期和沿y轴的值。

X和Y变量/函数

因此，我认为我的代码不生成图形的原因之一是如何声明x和y变量。我已经阅读了API参考资料，但这并没有让我获得成功。

Valueline变量/功能

一般来说，我认为这看起来不错，但是因为它使用的是x＆amp;上面提到的功能（我不完全理解），我无法确定。

设置域名

我认为这是使用针对不同数据模型量身定制的各种不同示例的另一个遗留问题，但我不确定。

摘要

因此，我认为有一些领域会导致我的图表只显示X＆amp; Y轴，但是花了一些相当长的时间试图更好地理解d3（使用似乎没有帮助的例子），我想我会转向stackoverflow。如果你们能给我任何指针，那就太棒了。

Answer 1

您当前方法的主要问题是您的x轴包含分类（定性）变量，而不是连续（定量）变量。

话虽如此，你必须选择适当的比例，例如点数：

var x = d3.scalePoint()
    .range([0, width])
    .domain(data.map(function(d) { return d.key; }));

然后，在行生成器中使用d.key。

最后，使用datum附加<path>，而不是data。

以下是包含这些更改的代码（以及更小的SVG）：

var dataset = [{
    "key": "Brazil",
    "value": 2
  },
  {
    "key": "Denmark",
    "value": 4
  },
  {
    "key": "Sweden",
    "value": 8
  },
  {
    "key": "Japan",
    "value": 10
  },
  {
    "key": "Russia",
    "value": 14
  }
];


// set the dimensions and margins of the graph
var margin = {
    top: 20,
    right: 20,
    bottom: 30,
    left: 50
  },
  width = 600 - margin.left - margin.right,
  height = 400 - margin.top - margin.bottom;

// set the ranges
var x = d3.scalePoint().range([0, width]);
var y = d3.scaleLinear().range([height, 0]);

// define the line
var valueline = d3.line()
  .x(function(d) {
    return x(d.key);
  })
  .y(function(d) {
    return y(d.value);
  });

// append the svg obgect to the body of the page
// appends a 'group' element to 'svg'
// moves the 'group' element to the top left margin
var svg = d3.select("body").append("svg")
  .attr("width", width + margin.left + margin.right)
  .attr("height", height + margin.top + margin.bottom)
  .append("g")
  .attr("transform",
    "translate(" + margin.left + "," + margin.top + ")");


function draw(data) {

  data.forEach(function(d) {
    d.value = +d.value;
  });

  data.sort(function(a, b) {
    return a.value - b.value;
  })

  // Scale the range of the data
  x.domain(data.map(function(d) {
    return d.key;
  }));
  y.domain([0, d3.max(data, function(d) {
    return d.value;
  })]);

  // Add the valueline path.
  svg.append("path")
    .datum(data)
    .attr("class", "line")
    .attr("d", valueline);

  svg.append("g")
    .attr("transform", "translate(0," + height + ")")
    .call(d3.axisBottom(x));

  // Add the Y Axis
  svg.append("g")
    .call(d3.axisLeft(y));
}

// trigger render
draw(dataset);

.line {
  fill: none;
  stroke: steelblue;
  stroke-width: 3px;
}

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

使用y轴上的整数和x轴上的字符串的线图

数据

结束目标

我尝试了什么

问题在哪里（我认为）

摘要

1 个答案: