D3 선 그래프 CSV

를 사용하여이 같은 CSV의 데이터가 :D3 선 그래프 CSV

date,partner,units 
2012-05-01,team1,34.12 
2012-04-30,team1,45.56 
2012-04-27,team2,67.89 
2012-04-26,team1,78.54 
2012-04-25,team2,89.23 
2012-04-24,team2,99.23 
2012-04-23,team2,101.34

나는 두 줄 (team1 하나,이 데이터를 사용하여 사의 Team2 심박 측정기 하나)를 플롯 할

,하지만 난 그냥 산점도를 얻고있다 다음과 같은 완전한 d3 코드를 사용하여 필터링이 잘못 되었습니까?

<!DOCTYPE html> 
<meta charset="utf-8"> 
<style> /* set the CSS */ 

#line1 { 
    fill: none; 
    stroke: steelblue; 
    stroke-width: 2px; 
} 
#line2 { 
    fill: none; 
    stroke: red; 
    stroke-width: 2px; 
} 

</style> 
<input type="button" onclick="hideLine()"> 
<input type="button" onclick="showLine()"> 
<!-- load the d3.js library --> 
<script src="https://d3js.org/d3.v4.min.js"></script> 
<script> 

// set the dimensions and margins of the graph 
var margin = {top: 20, right: 20, bottom: 30, left: 50}, 
     width = 960 - margin.left - margin.right, 
     height = 500 - margin.top - margin.bottom; 

// parse the date/time 
var parseTime = d3.timeParse("%Y-%m-%d"); 
// set the ranges 
var x = d3.scaleTime().range([0, width]); 
var y = d3.scaleLinear().range([height, 0]); 

// define the 1st line 
var valueline = d3.line() 
     .x(function(d) { return x(d.date); }) 
     .y(function(d) { return y(d.units); }); 

// define the 2nd line 
var valueline2 = d3.line() 
     .x(function(d) { return x(d.date); }) 
     .y(function(d) { return y(d.units); }); 

var svg = d3.select("body").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 + ")"); 

// Get the data 
d3.csv("data1.csv", function(error, data) { 
    if (error) throw error; 

    // format the data 
    data.forEach(function(d) { 
     d.date = parseTime(d.date); 
     d.units = +d.units; 
    }); 

    // Scale the range of the data 
    x.domain(d3.extent(data, function(d) { return d.date; })); 
    m = d3.max(data, function(d) { 
     var m = d.units; 
     return m; 
    }); 
    console.log("Max:", m); 
    y.domain([0,m]); 

    // Add the valueline path. 
    svg.append("path") 
      .data([data]) 
      .filter(function(d) { return d.partner == 'team1'; }) 
      .attr("id", "line1") 
      .attr("d", valueline); 
    console.log("DATA", data) 
    svg.selectAll(".point") 
      .data(data) 
      .enter() 
      .append("circle") 
      .attr("class", "point") 
      .attr("cx", function (d, i) { 
       return x(d.date); 
      }) 
      .attr("cy", function(d) { 
       return y(d.units); 
      }) 
      .attr("r", 4) 
      .on("mouseover", function(d) { console.log(d.units) }); 

    // Add the valueline2 path. 
    svg.append("path") 
      .data([data]) 
      .filter(function(d) { return d.partner == 'team2'; }) 
      .attr("id", "line2") 
      .style("stroke", "red") 
      .attr("d", valueline2) 
      .on("mouseover", function(d) {console.log(d)}); 

    // Add the X Axis 
    svg.append("g") 
      .attr("transform", "translate(0," + height + ")") 
      .call(d3.axisBottom(x)); 

    // Add the Y Axis 
    svg.append("g") 
      .call(d3.axisLeft(y)); 

}); 
function hideLine() { 
    console.log("Hideline"); 
    d3.select("#line2").attr("style", "opacity:0"); 
} 
function showLine() { 
    console.log("ShowLine"); 
    d3.select("#line2").attr("style", "opacity:1"); 
} 
</script> 
</body>

출처

2016-11-25 user3079275

네 필터가 잘못되었습니다. 다른 []에 데이터를 래핑하면 필터가 외부 배열에서만 작동한다는 의미입니다.

대신이 작업을 수행 :

svg.append("path") 
    .datum(data.filter(function(d) { return d.partner == 'team1'; })) 
    .attr("id", "line1") 
    .attr("d", valueline);

예를 here 작업.

출처

2016-11-25 21:09:38 Mark

D3 선 그래프 CSV

답변

관련 문제