使用 d3.js 的折线图中的 IF 语句笔划答案

【问题标题】：IF-statement stroke in a line diagram using d3.js使用 d3.js 的折线图中的 IF 语句笔划
【发布时间】：2013-05-02 19:16:23
【问题描述】：

我使用数据库中的数据绘制了一个图表，我希望当数据库中的数字高于 500 时这条线变成红色（如下所示）。不幸的是，它不能以这种方式工作，我尝试了其他一些方法，但没有成功。

虽然虚线使用代码.style("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

【问题讨论】：

标签： javascript if-statement d3.js svg attr

【解决方案1】：

您的数据可能未正确绑定到您的元素，但如果没有完整的代码，则很难判断。你可能需要...

svg.selectAll("path")
    .data(data)
    .enter()
    .append("path")                                    
    .attr("class", "line")                              
    .attr("stroke", function(d) {..});

您可以在此处查看您的代码的简化演示：http://jsfiddle.net/duopixel/V84Fz/

【讨论】：

别忘了.attr("d", valueline)。而.data(data) 必须是.data([data])。