如何解决SVG viewBox属性使D3Js折线图消失
我正在尝试使d3.js散点图/线形图可视化响应,并遵循以下提到的信息,该信息提到了使用窗口缩放svg的唯一方法是使用viewBox
属性,但是它出现了当我将svg中的with和height属性切换为viewBox属性时,图表消失,没有任何错误。将此属性应用于图表时,我做错什么了吗?
属性从:
.attr("width",width + margin.left + margin.right)
.attr("height",height + margin.top + margin.bottom)
对此:
.attr( 'preserveAspectRatio',"xMinYMin meet")
.attr("viewBox","0 0 " + width + margin.left + margin.right + " " + height + margin.top + margin.bottom)
以下是具有新更改的可视化文件:
<meta charset="utf-8">
<!-- Load d3.js -->
<script src="https://d3js.org/d3.v4.js"></script>
<!-- Create a div where the graph will take place -->
<div id="my_dataviz"></div>
<script>
var data = [
{ "x": "2020-04-26","y": 461.0,"label": "7:41" },{ "x": "2020-04-27","y": 421.0,"label": "7:01" },{ "x": "2020-04-28","y": 519.0,"label": "8:39" },{ "x": "2020-04-29","y": 502.0,"label": "8:22" },{ "x": "2020-04-30","y": 511.0,"label": "8:31" },{ "x": "2020-05-01","y": 513.0,"label": "8:33" },{ "x": "2020-05-02","y": 496.0,"label": "8:16" },{ "x": "2020-05-03","y": 480.0,"label": "8:00" },{ "x": "2020-05-04","y": 364.0,"label": "6:04" },{ "x": "2020-05-05","y": 498.0,"label": "8:18" },{ "x": "2020-05-06","y": 467.0,"label": "7:47" },{ "x": "2020-05-07","y": 477.0,"label": "7:57" },{ "x": "2020-05-08","y": 431.0,"label": "7:11" },{ "x": "2020-05-09","y": 419.0,"label": "6:59" },{ "x": "2020-05-10","y": 471.0,"label": "7:51" },{ "x": "2020-05-11","y": 391.0,"label": "6:31" },{ "x": "2020-05-12","y": 481.0,"label": "8:01" },{ "x": "2020-05-13","y": 494.0,"label": "8:14" },{ "x": "2020-05-14","y": 506.0,"label": "8:26" },{ "x": "2020-05-15","y": 464.0,"label": "7:44" },{ "x": "2020-05-16","y": 474.0,"label": "7:54" },{ "x": "2020-05-17","y": 383.0,"label": "6:23" },{ "x": "2020-05-18","y": 385.0,"label": "6:25" },{ "x": "2020-05-19","y": 470.0,"label": "7:50" },{ "x": "2020-05-20","y": 465.0,"label": "7:45" },{ "x": "2020-05-21","y": 574.0,"label": "9:34" },{ "x": "2020-05-22","y": 473.0,"label": "7:53" },{ "x": "2020-05-23",{ "x": "2020-05-24","y": 497.0,"label": "8:17" },{ "x": "2020-05-26","y": 482.0,"label": "8:02" },{ "x": "2020-05-27","y": 492.0,"label": "8:12" },{ "x": "2020-05-28",{ "x": "2020-05-29","y": 469.0,"label": "7:49" },{ "x": "2020-05-30","y": 395.0,"label": "6:35" },{ "x": "2020-05-31","y": 427.0,"label": "7:07" },{ "x": "2020-06-01","y": 346.0,"label": "5:46" },{ "x": "2020-06-02","y": 416.0,"label": "6:56" },{ "x": "2020-06-03",{ "x": "2020-06-04","y": 486.0,"label": "8:06" },{ "x": "2020-06-05","y": 451.0,"label": "7:31" },{ "x": "2020-06-06","y": 533.0,"label": "8:53" },{ "x": "2020-06-08","y": 462.0,"label": "7:42" },{ "x": "2020-06-09","label": "7:41" }
]
// D3 date parser
for (var i=0; i < data.length; i++){
var parser = d3.timeParse("%Y-%m-%d")
data[i].date = parser(data[i].x);
}
console.log(data)
var margin = { top: 10,right: 30,bottom: 30,left: 60 }
var width = 800 - margin.left - margin.right;
var height = 800 - margin.top - margin.bottom;
// Define the div for the tooltip
var div = d3.select("body").append("div")
.attr("class","tooltip")
.style("opacity",0);
var svg = d3.select("#my_dataviz")
.append("svg")
// .attr("width",width + margin.left + margin.right)
// .attr("height",height + margin.top + margin.bottom)
.attr( 'preserveAspectRatio',"xMinYMin meet")
.attr("viewBox","0 0 " + width + margin.left + margin.right + " " + height + margin.top + margin.bottom)
.append("g")
.attr("transform","translate(" + margin.left + "," + margin.top + ")"); // translate(margin left,margin top)
var x = d3.scaleTime()
.domain([d3.min(data,function(d) { return d.date }),d3.max(data,function(d) { return d.date })])
.range([0,width]);
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("Date");
var y = d3.scaleLinear()
.domain([0,function(d){ return +d.y })])
.range([height,0]);
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("Time Asleep (Minutes)");
// Add line path
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.date) })
.y(function(d) { return y(d.y) })
);
// Add the scatterplot (data points)
svg.selectAll("dot")
.data(data)
.enter().append("circle")
.attr("r",3)
.attr("cx",function(d){ return x(d.date) })
.attr("cy",function(d){ return y(d.y) })
</script>
以下是具有height和width属性的图表:
<meta charset="utf-8">
<!-- Load d3.js -->
<script src="https://d3js.org/d3.v4.js"></script>
<!-- Create a div where the graph will take place -->
<div id="my_dataviz"></div>
<script>
var data = [
{ "x": "2020-04-26",0);
var svg = d3.select("#my_dataviz")
.append("svg")
.attr("width",width + margin.left + margin.right)
.attr("height",height + margin.top + margin.bottom)
// .attr( 'preserveAspectRatio',"xMinYMin meet")
// .attr("viewBox",function(d){ return y(d.y) })
</script>
解决方法
这不是加法,而是将数字强制为字符串,然后进行串联:
.attr("viewBox","0 0 " + width + margin.left + margin.right + " " + height + margin.top + margin.bottom)
这将添加,然后强制并连接:
.attr("viewBox","0 0 " + (width + margin.left + margin.right) + " " + (height + margin.top + margin.bottom))
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。