使用d3.js在線圖中繪製IF語句筆畫

Question

我繪製了一個使用數據庫外的數據的圖形，並且當數據庫中的數字高於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 

Answer 1

您的數據可能沒有正確綁定到您的元素，但是很難說明沒有完整的代碼。你可能需要...

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

你可以看到你的代碼在這裏的簡化演示：http://jsfiddle.net/duopixel/V84Fz/