Question

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

似乎我的x值对于rev太大而不适合svg。我想不出任何想法来解决它，并希望得到任何帮助。

Answer 1

图表中的问题是您使用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);
})

以下是演示：

＆＃13;

<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>

＆＃13;

但是，我必须说这是任何D3程序员的奇怪代码。我建议您首先决定是否要绘制条形图或直方图（它们根本不同）。然后，在做出这个决定之后，使用适当的方法和比例。

D3直方图

1 个答案: