Question

即使在阅读了this等几个教程之后，我在d3中制作小倍数时遇到了一些问题。我打算制作一组2x2条形图，但我的代码中出现了一些错误，没有任何显示。

＆＃13;

<!DOCTYPE html>

<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style type="text/css">

  </style>
</head>

<body>
  <script type="text/javascript">
    //Width and height
    var w = 600;
    var h = 250;
    var margin = {
      top: 45,
      right: 100,
      bottom: 20,
      left: 20
    };

    var dataset = [{
        "type": "A",
        "idx": 1,
        "value": 2
      },
      {
        "type": "B",
        "idx": 1,
        "value": 2
      },
      {
        "type": "C",
        "idx": 1,
        "value": 3
      },
      {
        "type": "D",
        "idx": 1,
        "value": 3
      },
      {
        "type": "A",
        "idx": 2,
        "value": 3
      },
      {
        "type": "B",
        "idx": 2,
        "value": 2
      },
      {
        "type": "C",
        "idx": 2,
        "value": 5
      },
      {
        "type": "D",
        "idx": 2,
        "value": 1
      }
    ];
    var data = d3.nest()
      .key(function(d) {
        return d.type;
      })
      .entries(dataset);

    var xScale = d3.scaleBand()
      .domain(d3.range(data.length))
      .rangeRound([0, w])
      .paddingInner(0.05);

    var yScale = d3.scaleLinear()
      .domain([0, d3.max(data, d => d.value)])
      .range([0, h]);

    //Create SVG element
    var svg = d3.select("#vis").selectAll("svg")
      .data(data)
      .enter()
      .append("svg:svg")
      .attr("width", w + margin.left + margin.right)
      .attr("height", h + margin.top + margin.bottom)
      .append("g")
      .attr("transform", "translate(" + margin.left + "," + margin.top + ")");


    svg.selectAll(".bar")
      .data(function(d) {
        return d.values;
      })
      .enter()
      .append("rect")
      .attr("class", "bar")
      .attr("x", function(d) {
        return xScale(d.idx);
      })
      .attr("width", 10)
      .attr("y", function(d) {
        return yScale(d.value);
      })
      .attr("height", function(d) {
        return yScale(d.value);
      })
  </script>
</body>

＆＃13;

我打算为每个组制作一个条形图，并将其放在2x2网格上。但是在嵌套并附加多个svgs之后，什么都没有出现。

感谢您指出这里出了什么问题。

Answer 1

以下是问题：

您没有ID为vis的容器。创建它：

<div id="vis"></div>

条的高度不正确。它应该是：

.attr("height", function(d) {
    return h - yScale(d.value);
})

但是，主要问题是y比例的范围。由于您有嵌套数组，它应该是：

.domain([0, d3.max(data, d => d3.max(d.values, e => e.value))])

请注意，您的代码会为所有小倍数创建相同的比例。有时候设计师会为每个小的多个人想要不同的尺度...

以下是包含这些更改的代码：

<!DOCTYPE html>

<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style type="text/css">

  </style>
</head>

<body>
  <div id="vis"></div>
  <script type="text/javascript">
    //Width and height
    var w = 300;
    var h = 150;
    var margin = {
      top: 5,
      right: 10,
      bottom: 5,
      left: 10
    };

    var dataset = [{
        "type": "A",
        "idx": 1,
        "value": 2
      },
      {
        "type": "B",
        "idx": 1,
        "value": 2
      },
      {
        "type": "C",
        "idx": 1,
        "value": 3
      },
      {
        "type": "D",
        "idx": 1,
        "value": 3
      },
      {
        "type": "A",
        "idx": 2,
        "value": 3
      },
      {
        "type": "B",
        "idx": 2,
        "value": 2
      },
      {
        "type": "C",
        "idx": 2,
        "value": 5
      },
      {
        "type": "D",
        "idx": 2,
        "value": 1
      }
    ];
    var data = d3.nest()
      .key(function(d) {
        return d.type;
      })
      .entries(dataset);

    var xScale = d3.scaleBand()
      .domain(d3.range(data.length))
      .rangeRound([0, w])
      .paddingInner(0.05);

    var yScale = d3.scaleLinear()
      .domain([0, d3.max(data, d => d3.max(d.values, e => e.value))])
      .range([0, h]);

    //Create SVG element
    var svg = d3.select("#vis").selectAll("svg")
      .data(data)
      .enter()
      .append("svg:svg")
      .attr("width", w + margin.left + margin.right)
      .attr("height", h + margin.top + margin.bottom)
      .append("g")
      .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

    svg.selectAll(".bar")
      .data(function(d) {
        return d.values;
      })
      .enter()
      .append("rect")
      .attr("class", "bar")
      .attr("x", function(d) {
        return xScale(d.idx);
      })
      .attr("width", 10)
      .attr("y", function(d) {
        return yScale(d.value);
      })
      .attr("height", function(d) {
        return h - yScale(d.value);
      })
  </script>
</body>

Answer 2

我可以看到你正在选择一个id =＆＃34; vis＆＃34;的DOM元素。这在dom中不存在。尝试在dom中添加id为vis的元素。

<div id='vis'></div>

如何在d3.js中生成小的倍数

2 个答案: