Javascript 图表中的网格线,在本例中如何获取
如何获得下图中的网格线?我一直试图通过使用D3NoobsD3技巧和技巧来获得网格线。但是这个代码不起作用Javascript 图表中的网格线,在本例中如何获取,javascript,html,css,d3.js,charts,Javascript,Html,Css,D3.js,Charts,如何获得下图中的网格线?我一直试图通过使用D3NoobsD3技巧和技巧来获得网格线。但是这个代码不起作用 .grid.tick { stroke: lightgrey; opacity: 0.7; } .grid path { stroke-width: 0; } <!DOCTYPE html> <html> <head> <title>The d3 test&
.grid.tick {
stroke: lightgrey;
opacity: 0.7;
}
.grid path {
stroke-width: 0;
}
<!DOCTYPE html>
<html>
<head>
<title>The d3 test</title>
<style> \\ css
.chart {
}
.main text {
font: 10px sans-serif;
}
.axis line, .axis path {
shape-rendering: crispEdges;
stroke: black;
fill: none;
}
circle {
fill: steelblue;
}
</style>
<script type="text/javascript" src="http://mbostock.github.com/d3/d3.v2.js">
</script>
</head>
<body>\\ script
<div class='content'>
<!-- /the chart goes here -->
</div>
<script type="text/javascript" src="scatterchart.js"></script>
</body>
</html>
因此,如何获取此图表中的网格线?您没有为网格线添加必要的代码。这是一个包含必要代码的示例。检查代码中的最后几行,从以下内容开始:
main.append("g")
.attr("class", "grid")
.attr("transform", "translate(0," + height + ")")
.call(make_x_axis()
.tickSize(-height, 0, 0)
.tickFormat(""));
…谢谢你,费尔诺夫坦德斯。你知道如何翻转图表吗?X轴必须向上,Y轴应从上到下增加。我可以将X轴移动到顶部,但图表本身采用了以前格式的值。当然,我已将图表翻转到y轴并将X轴向上移动。我把评论放在适当的地方。我假设这是您想要的,您可以通过研究整个代码来进一步改进。这是。是的,FernOfAndes这正是我想要的,非常感谢。如何从外部文件(如.txt或csv)解析var数据=[[2,2]、[2,5]、[6,6]、[6,7]、[25,25]?以及如何用一条线连接各种数据点?
main.append("g")
.attr("class", "grid")
.attr("transform", "translate(0," + height + ")")
.call(make_x_axis()
.tickSize(-height, 0, 0)
.tickFormat(""));