D3 直方图

debugcn 发表于 Dev

双曲线

我正在尝试通过函数使用 D3 创建一个简单的直方图。图表的 y 值作为数组传递给函数，然后函数创建 svg 和条形图。我的轴正确，但是横杆被切断。

似乎我的矩形 x 值太大而无法放入 svg。我想不出任何解决方案，希望能提供任何帮助。

杰拉尔多·费塔朵

您图表中的问题是您对 x 轴使用线性刻度，域从 0 到 1，然后将其用于 x 位置：

.attr("x", function(d, i) { return x(i) - 0.5; })

线性刻度用于直方图，但不用于条形图，我不清楚您实际上是在绘制直方图。话虽如此，无需对您的代码进行重大更改（这不是我的职责，我只是在回答一个特定问题），您可以将x属性更改为：

.attr("x", function(d, i) {
    return x(i/dataset.length);
})

这是演示：

<script src="https://d3js.org/d3.v4.min.js"></script>
<style>
  .title {
    padding-top: 10px;
    font-family: "Oswald", sans-serif;
  }
  
  .subtitle {
    font-family: "Open Sans", sans-serif;
    margin-top: 10px;
  }
  
  .bar:hover {
    fill: blue;
  }

</style>

<body>
  <div class="container">
    <h1 class="display-4 text-center title">HW #4</h1>
    <hr>
    <div class="row justify-content-md-center">
      <div class="col-12 col-md-auto">
        <button type="button" class="btn btn-primary">Bar chart</button>
        <br>
        <br>
        <br>
        <div id="normal"></div>
      </div>
    </div>
  </div>
  <script>
    function plotHistogram(element, dataset) {

      var margin = {
          top: 20,
          right: 20,
          bottom: 100,
          left: 40
        },
        width = 900 - margin.left - margin.right,
        height = 600 - margin.top - margin.bottom;

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

      var y = d3.scaleLinear()
        .domain([0, d3.max(dataset, function(d) {
          return d;
        })])
        .range([height, 0]);

      var svg = d3.select(element).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 + ")");

      // append the rectangles for the bar chart
      svg.selectAll(".bar")
        .data(dataset)
        .enter().append("rect")
        .attr("class", "bar")
        .attr("x", function(d, i) {
          return x(i/dataset.length);
        })
        .attr("width", x(1/dataset.length)-2)
        .attr("y", function(d) {
          return y(d);
        })
        .attr("height", function(d) {
          return height - y(d);
        })
        .attr("fill", "teal").attr("opacity", 0.5);

      // add the x Axis
      svg.append("g")
        .attr("transform", "translate(0," + height + ")")
        .call(d3.axisBottom(x))
        .selectAll("text")
        .style("text-anchor", "end")
        .attr("dx", "-.8em")
        .attr("dy", "-.55em")
        .attr("transform", "rotate(-90)");

      // add the y Axis
      svg.append("g")
        .call(d3.axisLeft(y));


    }

    // Change the array here
    plotHistogram("#normal", [10, 20, 50, 30, 15]);

  </script>
</body>

但是，我必须说，对于任何 D3 程序员来说，这都是一段奇怪的代码。我建议你首先决定你是要绘制条形图还是直方图（它们有根本的不同）。然后，在做出这个决定之后，使用适当的方法和尺度。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。