D3的直方图
[英]Histogram with D3
问题描述
I'm trying to create a simple histogram with D3 through a function. 
我正在尝试通过一个函数用D3创建一个简单的直方图。 The y values for the chart are passed to the function as an array and then the function creates the svg and the bars. 图表的y值作为数组传递给函数，然后函数创建svg和柱线。 I'm getting the axes properly but bars are getting cut off. 我的轴正确，但是横杆被切断。
It seems my x-values for the rects are too large to fit inside the svg. 似乎我的rect的x值太大，无法放入svg内。 I cannot think of any idea to fix it and would appreciate any kind of help. 我想不出任何解决方案，希望能提供任何帮助。
1 个解决方案
解决方案1
2 已采纳 2017-03-13 00:38:04
The problem in your chart is that you're using a linear scale for the x axis, with a domain going from 0 to 1, and then using this for the x position: 图表中的问题是，您正在对x轴使用线性比例，将域从0变为1，然后将其用于x位置：
.attr("x", function(d, i) { return x(i) - 0.5; })
Linear scales are used for histograms but not for bar charts, and it's not clear to me that you're in fact drawing a histogram. 线性刻度用于直方图，而不用于条形图，但我不清楚您实际上是在绘制直方图。 That being said, without making major changes in your code (it's not my place, I'm only answering a specific question), you can change the x attribute to: 话虽如此，无需在代码中进行重大更改（这不是我的位置，我仅回答一个特定的问题），您可以将x属性更改为：
.attr("x", function(d, i) {
return x(i/dataset.length);
})
Here is the demo: 这是演示：
<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>
However, I must say that this is a strange code for any D3 programmer. 但是，我必须说，这对于任何D3程序员来说都是一个奇怪的代码。 I suggest that you, firstly, decide if you want to draw a bar chart or a histogram (they are fundamentally different). 我建议您首先确定是要绘制条形图还是直方图（它们本质上是不同的）。 Then, after this decision, use the appropriate methods and scales. 然后，在做出此决定之后，使用适当的方法和量表。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.