2015-09-22 65 views
0

我想在類中選擇一個路徑。選擇一個<path> d3.js

我想使用下面的代碼來選擇路徑,而不是選擇一行或所有行。我正在嘗試選擇「lines」類中的line class「line_series_2」,但我迄今爲止嘗試過的所有內容都不起作用。

這裏是小提琴: http://jsfiddle.net/zvkgs5s4/4/

//The data for our line 
var lineData = [ { "x": 1, "y": 5}, { "x": 20, "y": 20}, 
        { "x": 40, "y": 10}, { "x": 60, "y": 40}, 
        { "x": 80, "y": 5}, { "x": 100, "y": 60}]; 

//The data for our line 
var lineData2 = [ { "x": 20, "y": 25}, { "x": 90, "y": 20}, 
        { "x": 54, "y": 30}, { "x": 11, "y": 40}, 
        { "x": 23, "y": 32}, { "x": 10, "y": 60}]; 


//This is the accessor function we talked about above 
var lineFunction = d3.svg.line() 
          .x(function(d) { return d.x; }) 
          .y(function(d) { return d.y; }) 
         .interpolate("linear"); 


var graph = d3.select('svg') 
     .append("svg:svg") 
     .attr("class", "line-graph") 
     .append("svg:g") 

    // append a group to contain all lines 
    var lines = graph.append("svg:g") 
     .attr("class", "lines"); 

    lines.append("path") 
     .attr("class", "line_series_1") 
     .attr("d", lineFunction(lineData)) 
     .attr("stroke", "blue") 
     .attr("stroke-width", 2) 
     .attr("fill", "none"); 

     lines.append("path") 
     .attr("class", "line_series_2") 
     .attr("d", lineFunction(lineData2)) 
     .attr("stroke", "red") 
     .attr("stroke-width", 2) 
     .attr("fill", "none"); 


d3.selectAll("g .lines .line_series_1").select("path").attr('stroke-width', '6'); 

下面的代碼將工作,但沒有選擇類 「的line_series_2」

d3.select("g .lines").select("path").attr('stroke-width', '6') 

d3.selectAll("g .lines").select("path").attr('stroke-width', '6') 

回答

3

你是過分複雜的選擇。

就讓它:

d3.selectAll(".line_series_1").attr('stroke-width', '6');