Question

我正在尝试选择一个类中的路径。

我正在尝试使用以下代码来选择路径，而是选择一条线或所有线。我正在尝试选择“行”类中的行类“line_series_2”，但到目前为止我尝试的所有内容都不起作用。

 //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')

Answer 1

您的选择过于复杂。

做到这一点：

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

选择<path> d3.js

1 个答案: