如何解决D3-条形图示例中的折线图
我正在尝试修改此示例中的以下代码
https://enappd.com/blog/adding-charts-in-ionic-4-apps-and-pwa-part-2/54/
到线图或连接的散点图(首选)。怎么样?
几乎所有简单的D3示例都可以找到条形图或具有不同的语法,因为它们从cvs
读取数据,而不是在上面的示例中本地读取数据。
到目前为止,D3对我来说有点神秘。
this.g.selectAll('.bar')
.data(this.barData)
.enter()
.append('rect')
.attr('class','bar')
.attr('fill','rgb(34,167,240)')
.attr('x',(d) => this.x(d.season))
.attr('y',(d) => this.y(d.viewers))
.attr('width',this.x.bandwidth())
.attr('height',(d) => this.height - this.y(d.viewers));
解决方法
我相信这是一条线图,不确定是否满足您的要求,请告诉我
// set the dimensions and margins of the graph
var margin = {top: 10,right: 30,bottom: 30,left: 60},width = 460 - margin.left - margin.right,height = 400 - margin.top - margin.bottom;
// append the svg object to the body of the page
var svg = d3.select("#my_dataviz")
.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 + ")");
//d3.csv("https://raw.githubusercontent.com/holtzy/data_to_viz/master/Example_dataset/2_TwoNum.csv",function(data) {
//console.log(data);
//});
var data = [
{ x: 1,y: 2500000 },{ x: 2,y: 3800000 },{ x: 3,y: 5000000 },{ x: 4,y: 6900000 },{ x: 5,{ x: 6,y: 7500000 },{ x: 7,y: 10000000 },{ x: 8,y: 17000000 }
];
// Add X axis
var x = d3.scaleLinear()
.domain([0,10])
.range([ 0,width ]);
svg.append("g")
.attr("transform","translate(0," + height + ")")
.call(d3.axisBottom(x));
// Add Y axis
var y = d3.scaleLinear()
.domain([0,20000000])
.range([ height,0]);
svg.append("g")
.call(d3.axisLeft(y));
// Add dots - scatter plot
//svg.append('g')
// .selectAll("dot")
// .data(data)
// .enter()
// .append("circle")
// .attr("cx",function (d) { return x(d.x); } )
// .attr("cy",function (d) { return y(d.y); } )
// .attr("r",1.5)
// .style("fill","#69b3a2")
svg.append("path")
.datum(data)
.attr("fill","none")
.attr("stroke","steelblue")
.attr("stroke-width",1.5)
.attr("d",d3.line()
.x(function(d) { return x(d.x) })
.y(function(d) { return y(d.y) })
)
svg.append("text")
.attr("transform","translate(" + (width/2) + "," +
(height + margin.top + 20) + ")")
.style("text-anchor","middle")
.text("season");
// 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("viewers");
</script>
<script src="https://d3js.org/d3.v4.js"></script>
<!-- Create a div where the graph will take place -->
<div id="my_dataviz"></div>
重要对于从CSV读取,在示例中掌握如何摆脱它相对简单。这是从csv加载数据的方法:
d3.csv("https://.../master/Example_dataset/2_TwoNum.csv",function(data) {
//do something with data here
});
因此,基本上,您是在回调中完成绘制的(一旦您有了数据,对吗?)。如果您在编写脚本时知道数据(例如在您的示例中),则只需分配数据并在d3
转换中使用它即可。 Here's a great example of scatter plot drawing in d3。我所做的只是简单地摆脱了回调并分配了您的数据+重新缩放x和y轴。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。