d3.js条形图未显示条形图
[英]d3.js bar graph is not showing bars
问题描述
我读了以前回答的问题，但没有运气。 我正在使用d3.js在数组上绘制元素的条形图，但条形图没有显示出来。 这是我正在尝试的脚本：
var data = [1, 2, 3, 4, 5]; var svg = d3.select("svg"); var margin = 100, width = svg.attr("width") - margin, height = svg.attr("height") - margin; var Xscale = d3.scaleBand() .domain([0, data.length]) .range([0, width]) .padding(0.2); var Yscale = d3.scaleLinear() .domain([0, d3.max(data)]) .range([height, 0]); var g = svg.append("g") .attr("transform", "translate(" + 100 + "," + 100 + ")"); g.append("g") .attr("transform", "translate(0," + height + ")") .call(d3.axisBottom(Xscale).tickFormat(function(d) { return d; }).ticks(10)); // .append("text") // .attr("x", 6) // .attr("text-anchor", "end") // .text("index"); g.append("g") .call(d3.axisLeft(Yscale).tickFormat(function(d) { return d; }).ticks(10)) .append("text") .attr("y", 6) .attr("dy", "0.71em") .attr("text-anchor", "end") .text("value"); g.selectAll(".bar") .data(data) .enter().append("rect") .attr("class", "bar") .attr("x", function(d, i) { return 0; }) .attr("y", function(d, i) { return 0; }) .attr("width", Xscale.bandwidth()) .attr("height", function(d, i) { return 0; });
<html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>Bar chart with D3.js</title> <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet"> <link rel="stylesheet" type="text/css" href="styles/da.css"> <script src="https://d3js.org/d3.v5.min.js"></script> <!-- <script src="js/da.js"></script> --> </head> <body> <div id='layout'> <h2>Bar chart example</h2> <div class='container'> <svg class="chart" height="500" width="1000" /> </div> </div> <p>Why this is not working?? </p> </body> </html>
我确实认为问题出在最后几行，获取x，y，宽度和高度。 我不知道要返回什么值，我尝试了各种方法，但没有得到图表。 因此，我刚刚将return 0放在那里。 值是多少？ 以及如何决定呢？ 谢谢你的帮助。 :)
2 个解决方案
解决方案1
0 已采纳 2019-03-18 19:39:21
您的scaleBand().domain()必须是Xscale的数组。 在我的解决方案中，我选择将值的索引作为数组。 您可以将数据（通常是对象数组）映射到数组中对象的其他值。 另外，在实际条的高度和宽度以及它们的位置方面，缩放比例还有其他一些问题。 请记住，SVG的原点是左上角，并且一切都与此有关。
我已经更新了下面的代码，该代码进行了必要的更改以生成条形图。 请仔细阅读它，让我知道您是否不了解任何内容。
var data = [1, 2, 3, 4, 5]; var svg = d3.select("svg"); var margin = 100, width = svg.attr("width") - margin, height = svg.attr("height") - margin; var Xscale = d3.scaleBand() .domain(data.map((e,i) => i)) //returns array [0,1,2,3,4] for the index of the values .range([0, width]) .padding(0.2); var dmax = d3.max(data) //calculates the max value of the data var Yscale = d3.scaleLinear() .domain([0, dmax]) .range([height, 0]); var g = svg.append("g") .attr("transform", "translate(" + 50 + "," + 50 + ")"); var x = g.append("g") .attr("transform", "translate(0," + height + ")") .call(d3.axisBottom(Xscale).tickFormat(function(d) { return d; }).ticks(10)) .append("text") .attr("x", 6) .attr("text-anchor", "end") .text("index"); var y = g.append("g") .call(d3.axisLeft(Yscale).tickFormat(function(d) { return d; }).ticks(10)) .append("text") .attr("y", 6) .attr("dy", "0.71em") .attr("text-anchor", "end") .text("value"); g.selectAll(".bar") .data(data) .enter().append("rect") .attr("class", "bar") .attr("x", function(d, i){ return Xscale(i)}) //move the bar to the x position where it should appear .attr("y", function(d, i) { return Yscale(d); }) //move the bar from the top down to the level of the value. .attr("width", Xscale.bandwidth() ) //the width of the bar is the width between the points on the x-axis .attr("height", function(d, i) { return Yscale(dmax-d); }); // the height of the points is calculated based on the scale and the difference between this point and the max value of the data.
<html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>Bar chart with D3.js</title> <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet"> <script src="https://d3js.org/d3.v5.min.js"></script> </head> <body> <div id='layout'> <h2>Bar chart example</h2> <div class='container'> <svg class="chart" height="500" width="1000" /> </div> </div> <p>Why this is not working?? </p> </body> </html>
解决方案2
-1 2019-03-18 19:32:34
我建议您阅读这篇文章。 它很好地解释了如何使用条形图。 https://blog.risingstack.com/d3-js-tutorial-bar-charts-with-javascript/
我使用了您的代码，并做了一个简单的例子。 https://codepen.io/mp-9007/pen/jJpEWY
主要问题是由于x，y和height的返回值。 您必须在图形区域中提供x和y位置。 绘制条形图就像在笛卡尔平面上绘制一样，您必须提供从何处开始的坐标，条的宽度和高度。 计划的原点在图像的左上方。
.attr("x", function(d, i) { //d = input data, i = index of it
return Xscale(d); //The scaling function returns the coordinate for a given domain value.
})
.attr("y", function(d, i) { //d = input data, i = index of it
return Yscale(d); //The scaling function returns the coordinate for a given domain value.
})
.attr("width", Xscale.bandwidth())
.attr("height", function(d, i) { //d = input data, i = index of it
return height - Yscale(d); //The computed y coordinate has to be subtracted from the height of the chart to get the correct representation of the value as a column.
});
同样，x轴的域可以视为类别。 在您的代码中，您仅提供了两个类别：0和data.length。 提供阵列解决了此问题。
var Xscale = d3.scaleBand().domain(data)
如何分别更改d3.js条形图条的颜色并为其缩放？
[英]How do I change the colour of my d3.js Bar Graph bars individually and make a Scale for them?
是否可以使用鼠标在d3.js中的条形图上选择多个条形
[英]Is it possible to select multiple bars on bar chart in d3.js with mouse
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.