Javascript 使用d3.js的线条图中的IF语句笔划
我使用数据库中的数据绘制了一个图表,当数据库中的数字大于500时,我希望这条线变成红色(如下所示)。不幸的是,它不这样工作,我也尝试了一些其他的东西,但没有成功 尽管使用代码Javascript 使用d3.js的线条图中的IF语句笔划,javascript,if-statement,d3.js,svg,attr,Javascript,If Statement,D3.js,Svg,Attr,我使用数据库中的数据绘制了一个图表,当数据库中的数字大于500时,我希望这条线变成红色(如下所示)。不幸的是,它不这样工作,我也尝试了一些其他的东西,但没有成功 尽管使用代码样式(“stroke dasharray”(“3,3”))时虚线也可以使用。 我的问题:当y值高于d3.js中的某个点时,是否可以让笔划颜色变为红色 // Adds the svg canvas var svg = d3.select("body") // Ex
样式(“stroke dasharray”(“3,3”))时虚线也可以使用。
我的问题:当y值高于d3.js中的某个点时,是否可以让笔划颜色变为红色
// Adds the svg canvas
var svg = d3.select("body") // Explicitly state where the svg element will go on the web page (the 'body')
.append("svg") // Append 'svg' to the html 'body' of the web page
.attr("width", width + margin.left + margin.right) // Set the 'width' of the svg element
.attr("height", height + margin.top + margin.bottom)// Set the 'height' of the svg element
.append("g") // Append 'g' to the html 'body' of the web page
.attr("transform", "translate(" + margin.left + "," + margin.top + ")"); // in a place that is the actual area for the graph
d3.json("php/data2.php", function(error, data) { // Go to the data folder (in the current directory) and read in the data.tsv file
data.forEach(function(d) { // For all the data values carry out the following
d.date = parseDate(d.date); // Parse the date from a set format (see parseDate)
d.close = +d.close; // makesure d.close is a number, not a string
});
// Scale the range of the data
x.domain(d3.extent(data, function(d) { return d.date; })); // set the x domain so be as wide as the range of dates we have.
y.domain([0, d3.max(data, function(d) { return d.close; })]); // set the y domain to go from 0 to the maximum value of d.close
// Add the valueline path.
svg.append("path") // append the valueline line to the 'path' element
.attr("class", "line") // apply the 'line' CSS styles to this path
.style("stroke-dasharray", ("3, 3"))
.attr("d", valueline(data)); // call the 'valueline' finction to draw the line
// Add the X Axis
svg.append("g") // append the x axis to the 'g' (grouping) element
.attr("class", "x axis") // apply the 'axis' CSS styles to this path
.attr("transform", "translate(0," + height + ")") // move the drawing point to 0,height
.call(xAxis); // call the xAxis function to draw the axis
// Add the Y Axis
svg.append("g") // append the y axis to the 'g' (grouping) element
.attr("class", "y axis") // apply the 'axis' CSS styles to this path
.call(yAxis); // call the yAxis function to draw the axis
您的数据可能没有正确绑定到元素,但是如果没有完整的代码就很难判断。你可能需要
svg.selectAll("path")
.data(data)
.enter()
.append("path")
.attr("class", "line")
.attr("stroke", function(d) {..});
您可以在这里看到代码的简化演示:不要忘记.attr(“d”,valueline)
。而.data(data)
需要是.data([data])
。