d3.js 콤보 차트 라인 및 분산 형

Question

저는 d3.js에 대해 매우 익숙하며 분산 형 차트 위에 선을 추가하려고합니다. I는 두 개의 데이터 셋이

var data = [ { 
     "x" : 30, 
     "y" : 30, 
     "r" : 20, 
     "c" : "green", 
     "s" : "s1" 
    }, { 
     "x" : 70, 
     "y" : 70, 
     "r" : 20, 
     "c" : "purple", 
     "s" : "s2" 
    }, { 
     "x" : 110, 
     "y" : 100, 
     "r" : 20, 
     "c" : "red", 
     "s" : "s3" 
    } ]; 

    var data1 = [{ 
     "x":30, 
     "y":30}, 
     {"x":70, 
      "y":70}]; 

데이터 변수가 비산 일련 난 광고 시리즈로 제 2 데이터 세트를 그리려 같은 차트를 사용 그려 져야한다.

var margin = { 
      top : 20, 
      right : 20, 
      bottom : 30, 
      left : 40 
     }, width = 960 - margin.left - margin.right, height = 500 - margin.top 
       - margin.bottom; 

    var x = d3.scale.linear().range([ 0, width ]); 

    var y = d3.scale.linear().range([ height, 0 ]); 

    var color = d3.scale.category10(); 

    var xAxis = d3.svg.axis().scale(x).orient("bottom"); 

    var yAxis = d3.svg.axis().scale(y).orient("left"); 

    var svg = d3.select("#"+div).append("svg").attr("width", 
      width + margin.left + margin.right).attr("height", 
      height + margin.top + margin.bottom).append("g").attr(
      "transform", 
      "translate(" + margin.left + "," + margin.top + ")"); 

    var data = [ { 
     "x" : 30, 
     "y" : 30, 
     "r" : 20, 
     "c" : "green", 
     "s" : "s1" 
    }, { 
     "x" : 70, 
     "y" : 70, 
     "r" : 20, 
     "c" : "purple", 
     "s" : "s2" 
    }, { 
     "x" : 110, 
     "y" : 100, 
     "r" : 20, 
     "c" : "red", 
     "s" : "s3" 
    } ]; 

    var data1 = [{ 
     "x":30, 
     "y":30}, 
     {"x":70, 
      "y":70}]; 

    x.domain(d3.extent(data, function(d) {   
     return d.x; 
    })).nice(); 
    y.domain(d3.extent(data, function(d) { 
     return d.y; 
    })).nice(); 

    svg.append("g").attr("class", "x axis").attr("transform", 
      "translate(0," + height + ")").call(xAxis).append("text").attr(
      "class", "label").attr("x", width).attr("y", -6).style(
      "text-anchor", "end").text("Yield"); 

    svg.append("g").attr("class", "y axis").call(yAxis).append("text") 
      .attr("class", "label").attr("transform", "rotate(-90)").attr(
        "y", 6).attr("dy", ".71em").style("text-anchor", "end") 
      .text("Skew") 

    var line = d3.svg.line() 
      .x(function(d) { return x(d.x); }) 
      .y(function(d) { return y(d.y); }); 
    svg.selectAll(".line").data(data1).enter().append("path").attr("class","line").attr("d",line); 

    svg.selectAll(".dot").data(data).enter().append("circle").attr("class", 
      "dot").attr("r", 3.5).attr("cx", function(d) { 
     return x(d.x); 
    }).attr("cy", function(d) { 
     return y(d.y); 
    }).style("fill", function(d) { 
     return color(d.c); 
    }); 



    var legend = svg.selectAll(".legend").data(color.domain()).enter() 
      .append("g").attr("class", "legend").attr("transform", 
        function(d, i) { 
         return "translate(0," + i * 20 + ")"; 
        }); 

    legend.append("rect").attr("x", width - 18).attr("width", 18).attr(
      "height", 18).style("fill", color); 

    legend.append("text").attr("x", width - 24).attr("y", 9).attr("dy", 
      ".35em").style("text-anchor", "end").text(function(d) { 
     return d; 
    }); 

그러나 나는 그려진 선을 전혀 보지 못합니다. 데이터 사용

Answer 1

([DATA1]) (또는 데이텀 (DATA1)) 및 선 스타일링이 보이게 :

svg.append("path") 
     .data([data1]) 
    .attr("class","line") 
    .attr("stroke", "steelblue") 
    .attr("fill", "none") 
    .attr("stroke-width", 1.5) 
    .attr("d",line); 

와 전에 : 경로 요소에 대해 생성되고 있었다

svg.selectAll(".line"). 
     data(data1).enter() 
    .append("path") 
     .attr("class","line") 
     .attr("d",line); 

당신이 음모를 꾸미고 싶었던 모든 포인트.

<path class="line"></path> 
<path class="line"></path> 

그리고 전화가 걸리지 않았습니다. 대신, 우리는 그것에 바인딩 된 포인트의 전체 배열을 가진 하나의 경로 객체가 필요합니다. 그 객체로, 우리는 .attr ("D", 선)과 점을 추가하고이와 끝까지 :

<path class="line" stroke-width="1.5" d="M0,450L450,192.8571428571429"></path> 

체크 아웃 이상이 post mbostock (및 링크)에 의해을 에이 작동하는 이유.