Question

我是d3.js的新手，我试图制作一个带有一系列对象的条形图，如下所示：

[
    0: {potenial: 5, actual: 12, latest: 9}
    1: {potenial: 6, actual: 14, latest: 10}
    2: {potenial: 7, actual: 16, latest: 11}
    3: {potenial: 8, actual: 18, latest: 12}
    4: {potenial: 9, actual: 20, latest: 13}
]

我正在尝试将每个对象的数据放在单个栏中。像这样：

我尝试过的是：

// Create data array of values to visualize

var dataObj = []

for (let i = 0; i < 5; i++) {
    dataObj[i] = {
        potenial: 5 + i,
        actual: 12 + (2 * i),
        latest: 9 + (i)
    }
}

console.log(dataObj)

// Create variable for the SVG
var svg = d3.select("body").append("svg")
          .attr("height","100%")
          .attr("width","100%");

// Select, append to SVG, and add attributes to rectangles for bar chart
svg.selectAll("rect")
    .data(dataObj)
    .enter().append("rect")
          .attr("class", "bar")
          .attr("height", function(d, i) {return (d.actual * 10)})
          .attr("width","40")
          .attr("x", function(d, i) {return (i * 60) + 25})
          .attr("y", function(d, i) {return 400 - (d.actual * 10)});

svg.selectAll("rect")
    .data(dataObj)
    .enter().append("rect")
        .attr("class", "bar2")
        .attr("height", function(d, i) {return (d.potenial * 10)})
        .attr("width","40")
        .attr("x", function(d, i) {return (i * 60) + 25})
        .attr("y", function(d, i) {return 400 - (d.potenial * 10)});

// Select, append to SVG, and add attributes to text
svg.selectAll("text")
    .data(dataObj)
    .enter().append("text")
    .text(function(d) {return d.actual})
           .attr("class", "text")
           .attr("x", function(d, i) {return (i * 60) + 36})
           .attr("y", function(d, i) {return 415 - (d.actual * 10)});

这给了我

因此，我对potential值所做的与对actual值所做的相同。但是只有一个出现。

对于不同的值，我该怎么做？

谢谢。

编辑

svg.selectAll("text2")
    .data(dataObj)
    .enter().append("text2")
    .text(function(d) {return d.potenial})
           .attr("class", "text2")
           .attr("x", function(d, i) {return (i * 60) + 36})
           .attr("y", function(d, i) {return 415 - (d.potenial * 10)});

Answer 1

您的问题是第二个svg.selectAll("rect")。这是选择最初添加的.bar矩形，替换其数据，然后计算空 .enter选择，并且不附加任何内容。如果希望两组rect是独立的，则使用不同的.selectAll。我总是尝试按班级做。

<!DOCTYPE html>
<html>

  <head>
    <script src="https://d3js.org/d3.v5.min.js"></script>
    <style>
      .bar {
        fill: steelblue;
      }
      
      .bar2 {
        fill: orange;
      }
      
      body {
        width: 800px;
        height: 800px;
      }
    </style>
  </head>

  <body>
    <script>
      var dataObj = []

for (let i = 0; i < 5; i++) {
    dataObj[i] = {
        potenial: 5 + i,
        actual: 12 + (2 * i),
        latest: 9 + (i)
    }
}

console.log(dataObj)

// Create variable for the SVG
var svg = d3.select("body").append("svg")
          .attr("height","100%")
          .attr("width","100%");

// Select, append to SVG, and add attributes to rectangles for bar chart
svg.selectAll(".bar")
    .data(dataObj)
    .enter().append("rect")
          .attr("class", "bar")
          .attr("height", function(d, i) {return (d.actual * 10)})
          .attr("width","40")
          .attr("x", function(d, i) {return (i * 60) + 25})
          .attr("y", function(d, i) {return 400 - (d.actual * 10)});

svg.selectAll(".bar2")
    .data(dataObj)
    .enter().append("rect")
        .attr("class", "bar2")
        .attr("height", function(d, i) {return (d.potenial * 10)})
        .attr("width","40")
        .attr("x", function(d, i) {return (i * 60) + 25})
        .attr("y", function(d, i) {return 400 - (d.potenial * 10)});

// Select, append to SVG, and add attributes to text
svg.selectAll("text")
    .data(dataObj)
    .enter().append("text")
    .text(function(d) {return d.actual})
           .attr("class", "text")
           .attr("x", function(d, i) {return (i * 60) + 36})
           .attr("y", function(d, i) {return 415 - (d.actual * 10)});
    </script>
  </body>

</html>

在d3.js中制作条形图。如何将单个对象中的值放入一个小节？

1 个答案: