如何解决将d3折线图转换为条形图
D3新手在这里。我有一个折线图，看起来完全符合我的需求。
这是我的代码，经过了一些调整，但主要是从here借来的。 ：
let pickedImage = info[UIImagePickerController.InfoKey.editedImage]
SVG如下所示：
那太好了。现在，我想使用相同的数据向图表添加条形图。我尝试按照示例创建<!DOCTYPE html>
<meta charset="utf-8">
<style> /* set the CSS */
.line {
fill: none;
stroke: steelblue;
stroke-width: 2px;
}
</style>
<body>
<!-- load the d3.js library -->
<script src="lib/d3/d3.min.js"></script>
<script src="lib/d3-dsv/d3-dsv.min.js"></script>
<script src="lib/d3-fetch/d3-fetch.min.js"></script>
<script>
// set the dimensions and margins of the graph
var margin = {top: 20,right: 20,bottom: 50,left: 70},width = 960 - margin.left - margin.right,height = 500 - margin.top - margin.bottom;
// parse the date / time
var parseTime = d3.timeParse("%Y");
// set the ranges
var x = d3.scaleTime().range([0,width]);
var y = d3.scaleLinear().range([height,0]);
// define the line
var valueline = d3.line()
.x(function(d) { return x(d.year); })
.y(function(d) { return y(d.running_total); });
// append the svg obgect to the body of the page
// appends a 'group' element to 'svg'
// moves the 'group' element to the top left margin
var svg = d3.select("body").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 + ")");
// Get the data
d3.csv("q3.csv").then(function(data) {
// format the data
data.forEach(function(d) {
d.year = parseTime(d.year);
d.running_total = +d.running_total;
});
console.log("d",data)
// Scale the range of the data
x.domain(d3.extent(data,function(d) { return d.year; }));
y.domain([0,d3.max(data,function(d) { return d.running_total; })]);
// Add the valueline path.
svg.append("path")
.data([data])
.attr("class","line")
.attr("d",valueline);
// Add the x Axis
svg.append("g")
.attr("transform","translate(0," + height + ")")
.call(d3.axisBottom(x));
// text label for the x axis
svg.append("text")
.attr("transform","translate(" + (width/2) + "," +
(height + margin.top + 20) + ")")
.style("text-anchor","middle")
.text("Year");
// Add the y Axis
svg.append("g")
.call(d3.axisLeft(y));
// text label for the y axis
svg.append("text")
.attr("transform","rotate(-90)")
.attr("y",0 - margin.left)
.attr("x",0 - (height / 2))
.attr("dy","1em")
.style("text-anchor","middle")
.text("Running Total");
});
</script>
</body>
的示例，但是显然无法以相同的方式创建valueline。这是我尝试过的方法：
rect然后在添加路径之后，我以为可以添加我的矩形。
var valuebox = d3.rect()
.x(function(d) { return x(d.year); })
.y(function(d) { return y(d.running_total); })
.width(x.bandwidth)
.height(function(d) { return height - y(d.running_total); });
感谢您的帮助！
解决方法
我能够通过在添加行的下面添加以下代码来获得此信息：
svg.selectAll("bar")
.data(data)
.enter().append("rect")
.style("fill","steelblue")
.attr("x",function(d) { return x(d.year); })
.attr("width",(width/data.length - 1))
.attr("y",function(d) { return y(d.running_total); })
.attr("height",function(d) { return height - y(d.running_total); });
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。