Javascript 无法生成网格线
我一直在尝试在我的图表中获得网格线,我一直在学习d3noob的d3技巧和技巧。如果我的代码错误,请帮助我 风格Javascript 无法生成网格线,javascript,html,svg,d3.js,charts,Javascript,Html,Svg,D3.js,Charts,我一直在尝试在我的图表中获得网格线,我一直在学习d3noob的d3技巧和技巧。如果我的代码错误,请帮助我 风格 body { font: 12px Arial; } path { stroke: steelblue; stroke-width: 2; fill: none; } .axis path, .axis line { fill: none; stroke: grey; stroke-width: 1; shape-rend
body {
font: 12px Arial;
}
path {
stroke: steelblue;
stroke-width: 2;
fill: none;
}
.axis path, .axis line {
fill: none;
stroke: grey;
stroke-width: 1;
shape-rendering: crispEdges;
}
.grid.tick {
stroke: lightgrey;
opacity: 0.7;
}
.grid path {
stroke-width: 0;
}
<body>
<!-- load the d3.js library -->
<script src="d3.v3.min.js"></script>
<script>
// Set the dimensions of the canvas / graph
Var margin = {
top: 30,
right: 20,
bottom: 30,
left: 50
},
width = 400 - margin.left - margin.right,
height = 200 - margin.top - margin.bottom;
// Parse the date / time
var parseDate = d3.time.format("%d-%b-%y").parse;
// Set the ranges
var x = d3.time.scale().range([0, width]);
var y = d3.scale.linear().range([height, 0]);
// Define the axes
var xAxis = d3.svg.axis().scale(x)
.orient("bottom").ticks(5);
var yAxis = d3.svg.axis().scale(y)
.orient("left").ticks(5);
// Define the line
var valueline = d3.svg.line()
.interpolate("bundle")
.x(function(d) {
return x(d.date);
})
.y(function(d) {
return y(d.close);
});
// Adds the svg canvas
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 + ")");
function make_x_axis() {
return d3.svg.axis()
.scale(x)
.orient("bottom")
.ticks(5)
}
function make_y_axis() {
return d3.svg.axis()
.scale(y)
.orient("left")
.ticks(5)
}
// Get the data
d3.csv("data.csv", function(error, data) {
data.forEach(function(d) {
d.date = parseDate(d.date);
d.close = +d.close;
});
// Scale the range of the data
x.domain(d3.extent(data, function(d) {
return d.date;
}));
y.domain([0, d3.max(data, function(d) {
return d.close;
})]);
// Add the valueline path.
svg.append("path")
.attr("class", "line")
.attr("d", valueline(data));
// Add the X Axis
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
svg.append("text") // text label for the x axis
.attr("transform", "translate(" + (width / 2) + " ," + (height + margin.bottom) + ")")
.style("text-anchor", "middle")
.text("Date");
// Add the Y Axis
svg.append("g")
.attr("class", "y axis")
.call(yAxis);
svg.append("text")
.attr("x", (width / 2))
.attr("y", 0 - (margin.top / 2))
.attr("text-anchor", "middle")
.style("font-size", "16px")
.style("text-decoration", "underline")
.text("Value vs Date Graph");
svg.append("g")
.attr("class", "grid")
.attr("transform", "translate(0," + height + ")")
.call(make_x_axis()
.tickSize(-height, 0, 0)
.tickFormat(""))
svg.append("g")
.attr("class", "grid")
.call(make_y_axis()
.tickSize(-width, 0, 0)
.tickFormat(""))
});
</script>
</body>
代码
body {
font: 12px Arial;
}
path {
stroke: steelblue;
stroke-width: 2;
fill: none;
}
.axis path, .axis line {
fill: none;
stroke: grey;
stroke-width: 1;
shape-rendering: crispEdges;
}
.grid.tick {
stroke: lightgrey;
opacity: 0.7;
}
.grid path {
stroke-width: 0;
}
<body>
<!-- load the d3.js library -->
<script src="d3.v3.min.js"></script>
<script>
// Set the dimensions of the canvas / graph
Var margin = {
top: 30,
right: 20,
bottom: 30,
left: 50
},
width = 400 - margin.left - margin.right,
height = 200 - margin.top - margin.bottom;
// Parse the date / time
var parseDate = d3.time.format("%d-%b-%y").parse;
// Set the ranges
var x = d3.time.scale().range([0, width]);
var y = d3.scale.linear().range([height, 0]);
// Define the axes
var xAxis = d3.svg.axis().scale(x)
.orient("bottom").ticks(5);
var yAxis = d3.svg.axis().scale(y)
.orient("left").ticks(5);
// Define the line
var valueline = d3.svg.line()
.interpolate("bundle")
.x(function(d) {
return x(d.date);
})
.y(function(d) {
return y(d.close);
});
// Adds the svg canvas
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 + ")");
function make_x_axis() {
return d3.svg.axis()
.scale(x)
.orient("bottom")
.ticks(5)
}
function make_y_axis() {
return d3.svg.axis()
.scale(y)
.orient("left")
.ticks(5)
}
// Get the data
d3.csv("data.csv", function(error, data) {
data.forEach(function(d) {
d.date = parseDate(d.date);
d.close = +d.close;
});
// Scale the range of the data
x.domain(d3.extent(data, function(d) {
return d.date;
}));
y.domain([0, d3.max(data, function(d) {
return d.close;
})]);
// Add the valueline path.
svg.append("path")
.attr("class", "line")
.attr("d", valueline(data));
// Add the X Axis
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
svg.append("text") // text label for the x axis
.attr("transform", "translate(" + (width / 2) + " ," + (height + margin.bottom) + ")")
.style("text-anchor", "middle")
.text("Date");
// Add the Y Axis
svg.append("g")
.attr("class", "y axis")
.call(yAxis);
svg.append("text")
.attr("x", (width / 2))
.attr("y", 0 - (margin.top / 2))
.attr("text-anchor", "middle")
.style("font-size", "16px")
.style("text-decoration", "underline")
.text("Value vs Date Graph");
svg.append("g")
.attr("class", "grid")
.attr("transform", "translate(0," + height + ")")
.call(make_x_axis()
.tickSize(-height, 0, 0)
.tickFormat(""))
svg.append("g")
.attr("class", "grid")
.call(make_y_axis()
.tickSize(-width, 0, 0)
.tickFormat(""))
});
</script>
</body>
问题可能是由第一行代码引起的,其中var显示为var。看看这是否有帮助
Var margin = {
top: 30,
right: 20,
bottom: 30,
left: 50
},
您的CSS中缺少一个空格:
.grid.tick {
stroke: lightgrey;
opacity: 0.7;
}
应该是
.grid .tick {
stroke: lightgrey;
opacity: 0.7;
}
或者如果你想更精确一些
g.grid g.tick line {
stroke: lightgrey;
opacity: 0.7;
}
axis函数使用类“tick”创建
元素。您正在类为“grid”的
元素中绘制这些元素。但是,如果没有空格,CSS选择器.grid.tick
仅在两个类位于同一元素上时才适用。您在哪里声明了“d3”?。您的代码在“var parseDate=d3.time.format(“%d-%b-%y”).parse;”处抛出错误。d3未定义我可以得到图表,但不能得到网格线。你在做什么与你正在进行的教程不同?在教程中,它是一个线图。我想生成散点图。但我试图一步一步地获得与教程中类似的图形,但使用网格线代码我没有得到网格线。我仍然没有得到网格线扫描。您试图将一个简化的工作示例(在[JS Fiddle](Fiddle.jshell.net)或类似的东西上)放在一起演示问题?可能还有其他简单的事情在进行……将代码复制到JSFIDLE中,使用my和@FrancisHemsher的打字错误更正(和硬编码数据)可以很好地工作:您确定您的控制台上没有任何运行时错误吗?谢谢您AmeliaBR。现在开始工作了。你能帮我用这个图表画一幅图像吗?我不明白你说的“把图像画到图表上”是什么意思。如果你真的被一些新的东西困住了,那就单独提出一个问题,让很多人都能看到。