Question

我阅读了之前回答的问题，但没有运气。我正在使用d3.js在数组上绘制元素的条形图，但条形图没有显示出来。这是我正在尝试的脚本：

var data = [1, 2, 3, 4, 5];
var svg = d3.select("svg");
var margin = 100,
  width = svg.attr("width") - margin,
  height = svg.attr("height") - margin;
var Xscale = d3.scaleBand()
  .domain([0, data.length])
  .range([0, width])
  .padding(0.2);
var Yscale = d3.scaleLinear()
  .domain([0, d3.max(data)])
  .range([height, 0]);
var g = svg.append("g")
  .attr("transform", "translate(" + 100 + "," + 100 + ")");
g.append("g")
  .attr("transform", "translate(0," + height + ")")
  .call(d3.axisBottom(Xscale).tickFormat(function(d) {
    return d;
  }).ticks(10));
// .append("text")
// .attr("x", 6)
// .attr("text-anchor", "end")
// .text("index");

g.append("g")
  .call(d3.axisLeft(Yscale).tickFormat(function(d) {
    return d;
  }).ticks(10))
  .append("text")
  .attr("y", 6)
  .attr("dy", "0.71em")
  .attr("text-anchor", "end")
  .text("value");


g.selectAll(".bar")
  .data(data)
  .enter().append("rect")
  .attr("class", "bar")
  .attr("x", function(d, i) {
    return 0;
  })
  .attr("y", function(d, i) {
    return 0;
  })
  .attr("width", Xscale.bandwidth())
  .attr("height", function(d, i) {
    return 0;
  });

<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <title>Bar chart with D3.js</title>

  <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
  <link rel="stylesheet" type="text/css" href="styles/da.css">
  <script src="https://d3js.org/d3.v5.min.js"></script>

  <!-- <script src="js/da.js"></script> -->
</head>

<body>
  <div id='layout'>
    <h2>Bar chart example</h2>
    <div class='container'>
      <svg class="chart" height="500" width="1000" />
    </div>
  </div>
  <p>Why this is not working?? </p>
</body>

</html>

我确实认为问题出在最后几行，获取x，y，宽度和高度。我不知道要返回什么值，我尝试了各种方法，但没有得到图表。因此，我刚刚将return 0放在那里。值是多少？以及如何决定呢？谢谢你的帮助。：）

Answer 1

您的scaleBand().domain()必须是Xscale的数组。在我的解决方案中，我选择将值的索引作为数组。您可以将数据（通常是对象数组）映射到数组中对象的其他值。另外，在实际条的高度和宽度以及它们的位置方面，缩放比例还有其他一些问题。请记住，SVG的原点是左上角，所有东西都与此相对。

我已经更新了下面的代码，该代码进行了必要的更改以生成条形图。请仔细阅读一下，让我知道是否有您不了解的内容。

var data = [1, 2, 3, 4, 5];
var svg = d3.select("svg");
var margin = 100,
  width = svg.attr("width") - margin,
  height = svg.attr("height") - margin;
var Xscale = d3.scaleBand()
  .domain(data.map((e,i) => i)) //returns array [0,1,2,3,4] for the index of the values
  .range([0, width])
  .padding(0.2);
var dmax = d3.max(data) //calculates the max value of the data
var Yscale = d3.scaleLinear()
  .domain([0, dmax])
  .range([height, 0]);
  
var g = svg.append("g")
  .attr("transform", "translate(" + 50 + "," + 50 + ")");

var x = g.append("g")
  .attr("transform", "translate(0," + height + ")")
  .call(d3.axisBottom(Xscale).tickFormat(function(d) {
    return d;
  }).ticks(10))
 .append("text")
 .attr("x", 6)
 .attr("text-anchor", "end")
 .text("index");

var y = g.append("g")
  .call(d3.axisLeft(Yscale).tickFormat(function(d) {
    return d;
  }).ticks(10))
  .append("text")
  .attr("y", 6)
  .attr("dy", "0.71em")
  .attr("text-anchor", "end")
  .text("value");

g.selectAll(".bar")
  .data(data)
  .enter().append("rect")
  .attr("class", "bar")
  .attr("x", function(d, i){ return Xscale(i)}) //move the bar to the x position where it should appear
  .attr("y", function(d, i) { return Yscale(d); }) //move the bar from the top down to the level of the value.
  .attr("width", Xscale.bandwidth() ) //the width of the bar is the width between the points on the x-axis 
  .attr("height", function(d, i) {
    return Yscale(dmax-d);
  }); // the height of the points is calculated based on the scale and the difference between this point and the max value of the data.

<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <title>Bar chart with D3.js</title>
  <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
  <script src="https://d3js.org/d3.v5.min.js"></script>

</head>

<body>
  <div id='layout'>
    <h2>Bar chart example</h2>
    <div class='container'>
      <svg class="chart" height="500" width="1000" />
    </div>
  </div>
  <p>Why this is not working?? </p>
</body>

</html>

Answer 2

我建议您阅读这篇文章。它很好地解释了如何使用条形图。 https://blog.risingstack.com/d3-js-tutorial-bar-charts-with-javascript/

我使用了您的代码，并做了一个简单的例子。 https://codepen.io/mp-9007/pen/jJpEWY

主要问题是由于x，y和height的返回值；您必须在图形区域中提供x和y位置。绘制条形图就像在笛卡尔平面上绘制一样，您必须提供从何处开始的坐标，条的宽度和高度。计划的原点在图像的左上方。

.attr("x", function(d, i) { //d = input data, i = index of it
    return Xscale(d); //The scaling function returns the coordinate for a given domain value.
})
.attr("y", function(d, i) { //d = input data, i = index of it
    return Yscale(d); //The scaling function returns the coordinate for a given domain value.
})
.attr("width", Xscale.bandwidth())
.attr("height", function(d, i) { //d = input data, i = index of it
    return height - Yscale(d); //The computed y coordinate has to be subtracted from the height of the chart to get the correct representation of the value as a column.
});

此外，x轴的域也可以视为类别。在您的代码中，您仅提供了两个类别：0和data.length。提供阵列解决了这个问题。

var Xscale = d3.scaleBand().domain(data)

d3.js条形图未显示条形图

2 个答案: