我想知道我做错了什么。我遵循了一些关于在 3DJS V4 中制作网格线的教程 ( Vertical grid Simple gridlines in d3js v4 ),并且我尝试将他们的代码与我自己的代码结合起来。
但是我希望在 svg 中有一些垂直网格线,这样图表会更容易阅读。
我的代码:
function makeChart(desktopData,mobileData,tabletData){
console.log(desktopData);
var WIDTH = 1200,
HEIGHT = 300,
MARGINS = {
top:20,
right:20,
bottom:20,
left:50
}
var vis = d3.select("#visualisation"),
WIDTH = 1200,
HEIGHT = 300,
MARGINS = {
top: 20,
right: 20,
bottom: 20,
left: 50
},
xScale = d3.scale.linear().range([MARGINS.left,WIDTH-MARGINS.right]).domain([00,23]),
yScale = d3.scale.linear().range([HEIGHT - MARGINS.top, MARGINS.bottom]).domain([00,100]),
xAxis = d3.svg.axis()
.scale(xScale)
yAxis = d3.svg.axis()
.scale(yScale)
.ticks(10)
.tickPadding(20)
.orient("left");
vis.append("svg:g")
.attr("class","axis")
.attr("transform", "translate(0," + (HEIGHT - MARGINS.bottom) + ")")
.call(xAxis);
vis.append("svg:g")
.attr("class","axis")
.attr("transform", "translate(" + (MARGINS.left) + ",0)")
.call(yAxis);
var lineGen = d3.svg.line()
.x(function(d){
return xScale(d.uur);
})
.y(function(d){
return yScale(d.pageviews);
});
vis.append('svg:path')
.attr('d', lineGen(desktopData))
.attr('stroke','deepskyblue')
.attr('stroke-width',2)
.attr('fill','none');
vis.append('svg:path')
.attr('d', lineGen(mobileData))
.attr('stroke','orange')
.attr('stroke-width',2)
.attr('fill','none');
vis.append('svg:path')
.attr('d', lineGen(tabletData))
.attr('stroke','deeppink')
.attr('stroke-width',2)
.attr('fill','none');
// gridlines in y axis function
function make_y_gridlines() {
return d3.svg.axis(yScale)
}
// add the Y gridlines
vis.append("g")
.attr("class", "grid")
.call(make_y_gridlines()
.tickSize(-WIDTH)
.tickFormat("")
)
}
我的CSS:
.grid line {
stroke: lightgrey;
stroke-opacity: 0.7;
shape-rendering: crispEdges;
}
.grid path {
stroke-width: 0;
}
最佳答案
如果我没有弄错你的 CSS,你的 .grid path{stroke-width:0;}
应该是 .grid path{stroke-width:0.5;}
0.5 可以是您想要的任何数字。笔划宽度为 0 会有效地删除线条。
关于javascript - 如何将垂直网格线添加到我的 d3 图表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47657739/