d3線之間的點不工作

Question

我已經使用d3做了一個散點圖，並希望用線連接點，我嘗試使用人們在線寫入來連接線但它似乎並沒有工作。

function makeGraph(sampleData){ 
    console.log(sampleData); 
    var vis = d3.select("#svgVisualize"); 

    yMax = d3.max(sampleData, function (point) {return point.y;}); 

    //step 1 : scale the data 

    xRange = d3.scale.ordinal().domain(sampleData.map(function (d) { return d.x; })).rangePoints([0, 700]); 
    yRange = d3.scale.linear().range([400, 40]).domain([0, yMax]); 


    //step 2: scale the axis 
    xAxis = d3.svg.axis().scale(xRange); 
    yAxis = d3.svg.axis().scale(yRange).orient("left"); 

    //Step3: append the x and y axis 
    vis.append('svg:g') 
      .call(xAxis) 
      .attr("transform", "translate(90,400)") 
      .append("text") 
      .text("Build Model") 
      .attr("y", 70) 
      .attr("x", 150); 
    vis.append('svg:g') 
      .call(yAxis) 
      .attr("transform", "translate(90,0)") 
      .append("text") 
      .attr("transform", "rotate(-90)") 
      .attr("y", -80) 
      .attr("x", -130) 
      .attr("dy", ".71em") 
      .style("text-anchor", "end") 
      .text("Number of Users"); 

    var circles = vis.selectAll("circle").data(sampleData); 

    circles 
      .enter() 
      .insert("circle") 
      .attr("cx", function (d) {return xRange(d.x);}) 
      .attr("cy", function (d) { return yRange(d.y); }) 
      .attr("r", 4) 
      .attr("transform", "translate(90,0)") 
      .style("fill", "blue"); 
    var lineFunction = vis.line() 
      .x(function (d) { 
       return d.x; 
      }) 
      .y(function (d) { 
       return d.y; 
      }) 
      .interpolate("linear"); 

    vis.append("path") 
      .attr("d", lineFunction(sampleData)) 
      .style("stroke-width", 0.5) 
      .style("stroke", "rgb(6,120,155)") 
      .style("fill", "none") 
      .on("mouseover", function() { 
       d3.select(this) 
         .style("stroke", "orange"); 
      }) 
      .on("mouseout", function() { 
       d3.select(this) 
         .style("stroke", "rgb(6,120,155)"); 
      }); 
} 

如果有人能夠幫助這將是巨大的，我還是新來D3

Answer 1

線功能必須是這樣的：

var lineFunction = d3.svg.line() 
    .x(function(d) { return xRange(d.x); }) 
    .y(function(d) { return yRange(d.y); }) 
    .interpolate("linear"); 

Answer 2

您的示例工作正常，我必須執行以下操作

• 將創建路徑生成器的行更改爲d3.svg.line（就像Gerardo的回答）
• 創建你的圈子中的一組和路徑，這樣你就不用加.attr("transform", "translate(90,0)")他們兩個人的
• 使用的路徑data join（儘管它不是必需的）

function makeGraph(sampleData) { 
 
    var svg = d3.select('#svgVisualize') 
 

 
    yMax = d3.max(sampleData, function(point) { 
 
    return point.y; 
 
    }); 
 

 
    xRange = d3.scale.ordinal().domain(sampleData.map(function(d) { 
 
    return d.x; 
 
    })).rangePoints([0, 700]); 
 
    yRange = d3.scale.linear().range([400, 40]).domain([0, yMax]); 
 

 

 
    //step 2: scale the axis 
 
    xAxis = d3.svg.axis().scale(xRange); 
 
    yAxis = d3.svg.axis().scale(yRange).orient("left"); 
 

 
    //Step3: append the x and y axis 
 
    svg.append('svg:g') 
 
    .call(xAxis) 
 
    .attr("transform", "translate(90,400)") 
 
    .append("text") 
 
    .text("Build Model") 
 
    .attr("y", 70) 
 
    .attr("x", 150); 
 
    svg.append('svg:g') 
 
    .call(yAxis) 
 
    .attr("transform", "translate(90,0)") 
 
    .append("text") 
 
    .attr("transform", "rotate(-90)") 
 
    .attr("y", -80) 
 
    .attr("x", -130) 
 
    .attr("dy", ".71em") 
 
    .style("text-anchor", "end") 
 
    .text("Number of Users"); 
 
    
 
    // data 
 
    var g = svg.append('g') 
 
    .attr('class', 'data') 
 
    .attr("transform", "translate(90,0)") 
 

 

 
    var circles = g.selectAll("circle").data(sampleData); 
 
    circles 
 
    .enter() 
 
    .insert("circle") 
 
    .attr("cx", function(d) { 
 
     return xRange(d.x); 
 
    }) 
 
    .attr("cy", function(d) { 
 
     return yRange(d.y); 
 
    }) 
 
    .attr("r", 4) 
 
    .style("fill", "blue"); 
 
    
 
    var lineFunction = d3.svg.line() 
 
    .x(function(d) { return xRange(d.x); }) 
 
    .y(function(d) { return yRange(d.y); }) 
 
    .interpolate("linear"); 
 
    var path = g.selectAll('path').data([sampleData]) 
 
    .enter() 
 
    .append('path') 
 
    .attr("d", lineFunction) 
 
    .style("stroke-width", 0.5) 
 
    .style("stroke", "rgb(6,120,155)") 
 
    .style("fill", "none") 
 
    .on("mouseover", function() { 
 
     d3.select(this) 
 
     .style("stroke", "orange"); 
 
    }) 
 
    .on("mouseout", function() { 
 
     d3.select(this) 
 
     .style("stroke", "rgb(6,120,155)"); 
 
    }); 
 
} 
 

 
makeGraph([ 
 
    {x: 0, y: 100}, 
 
    {x: 100, y: 100}, 
 
    {x: 200, y: 200}, 
 
    {x: 300, y: 100} 
 
])

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script> 
 

 
<svg id="svgVisualize" width="900" height="500" style="position: relative; left: 2%;"></svg>