d3.csv를 d3.csv.parse로 바꿉니다.

Question

일부 d3 자바 스크립트 템플릿을 사용하려고합니다.

내 솔루션에서 d3.csv를 d3.csv.parse 메서드로 교체해야합니다.

큰 문제가 있습니다. 코드를 어떻게 변경해야하는지 이해할 수 없습니다.

다음은 내가 사용중인 템플릿에 대한 링크입니다. http://bl.ocks.org/KathyZ/c2d4694c953419e0509b

여기 내 코드입니다 :

 var width = 960, 
    height = 750, 
    cellSize = 25; // cell size 

var no_months_in_a_row = Math.floor(width/(cellSize * 7 + 50)); 
var shift_up = cellSize * 3; 

var day = d3.time.format("%w"), // day of the week 
    day_of_month = d3.time.format("%e") // day of the month 
    day_of_year = d3.time.format("%j") 
    week = d3.time.format("%U"), // week number of the year 
    month = d3.time.format("%m"), // month number 
    year = d3.time.format("%Y"), 
    percent = d3.format(".1%"), 
    format = d3.time.format("%Y-%m-%d"); 

var color = d3.scale.quantize() 
    .domain([-.05, .05]) 
    .range(d3.range(11).map(function(d) { return "q" + d + "-11"; })); 

var svg = d3.select("#chart").selectAll("svg") 
    .data(d3.range(2017, 2018)) 
    .enter().append("svg") 
    .attr("width", width) 
    .attr("height", height) 
    .attr("class", "RdYlGn") 
    .append("g") 

var rect = svg.selectAll(".day") 
    .data(function(d) { 
     return d3.time.days(new Date(d, 0, 1), new Date(d + 1, 0, 1)); 
    }) 
    .enter().append("rect") 
    .attr("class", "day") 
    .attr("width", cellSize) 
    .attr("height", cellSize) 
    .attr("x", function(d) { 
     var month_padding = 1.2 * cellSize*7 * ((month(d)-1) % (no_months_in_a_row)); 
     return day(d) * cellSize + month_padding; 
    }) 
    .attr("y", function(d) { 
     var week_diff = week(d) - week(new Date(year(d), month(d)-1, 1)); 
     var row_level = Math.ceil(month(d)/(no_months_in_a_row)); 
     return (week_diff*cellSize) + row_level*cellSize*8 - cellSize/2 - shift_up; 
    }) 
    .datum(format); 

var month_titles = svg.selectAll(".month-title") // Jan, Feb, Mar and the whatnot 
     .data(function(d) { 
     return d3.time.months(new Date(d, 0, 1), new Date(d + 1, 0, 1)); }) 
    .enter().append("text") 
     .text(monthTitle) 
     .attr("x", function(d, i) { 
     var month_padding = 1.2 * cellSize*7* ((month(d)-1) % (no_months_in_a_row)); 
     return month_padding; 
     }) 
     .attr("y", function(d, i) { 
     var week_diff = week(d) - week(new Date(year(d), month(d)-1, 1)); 
     var row_level = Math.ceil(month(d)/(no_months_in_a_row)); 
     return (week_diff*cellSize) + row_level*cellSize*8 - cellSize - shift_up; 
     }) 
     .attr("class", "month-title") 
     .attr("d", monthTitle); 

var year_titles = svg.selectAll(".year-title") // Jan, Feb, Mar and the whatnot 
     .data(function(d) { 
     return d3.time.years(new Date(d, 0, 1), new Date(d + 1, 0, 1)); }) 
    .enter().append("text") 
     .text(yearTitle) 
     .attr("x", function(d, i) { return width/2 - 100; }) 
     .attr("y", function(d, i) { return cellSize*5.5 - shift_up; }) 
     .attr("class", "year-title") 
     .attr("d", yearTitle); 


// Tooltip Object 
var tooltip = d3.select("body") 
    .append("div").attr("id", "tooltip") 
    .style("position", "absolute") 
    .style("z-index", "10") 
    .style("visibility", "hidden") 
    .text("a simple tooltip"); 

/*이 지금 그 작업이 dji.csv 것입니다. 하지만 나는 string insteed를 사용하기를 좋아합니다. */ var dataIliketoUse = "날짜, 열기 \ n2010-10-01,1 \ n2010-09-30,1"; 이 변수 정의 뒤에 넣어 d3.csv에 대한 콜백 함수에 있었다

var csv = d3.csv.parse(dataAsString, function(item) { 
    return item; 
}); 

모든 코드 :

d3.csv("dji.csv", function(error, csv) { 
    var data = d3.nest() 
    .key(function(d) { return d.Date; }) 
    .rollup(function(d) { return d[0].Value; }) 
    .map(csv); 

    rect.filter(function(d) { return d in data; }) 
     .attr("class", function(d) { return "day " + color(data[d]); }) 
    .select("title") 
     .text(function(d) { return d + ": " + percent(data[d]); }); 

    // Tooltip 
    rect.on("mouseover", mouseover); 
    rect.on("mouseout", mouseout); 
    function mouseover(d) { 
    tooltip.style("visibility", "visible"); 
    var percent_data = (data[d] !== undefined) ? percent(data[d]) : percent(0); 
    var purchase_text = d + ": " + percent_data; 

    tooltip.transition()   
       .duration(200)  
       .style("opacity", .9);  
    tooltip.html(purchase_text) 
       .style("left", (d3.event.pageX)+30 + "px")  
       .style("top", (d3.event.pageY) + "px"); 
    } 
    function mouseout (d) { 
    tooltip.transition()   
      .duration(500)  
      .style("opacity", 0); 
    var $tooltip = $("#tooltip"); 
    $tooltip.empty(); 
    } 

}); 

function dayTitle (t0) { 
    return t0.toString().split(" ")[2]; 
} 
function monthTitle (t0) { 
    return t0.toLocaleString("en-us", { month: "long" }); 
} 
function yearTitle (t0) { 
    return t0.toString().split(" ")[3]; 
} 

Answer 1

당신은 변수 csv이 방법을 정의해야합니다.

var data = d3.nest() 
    .key(function(d) { 
    return d.Date; 
    }) 
    .rollup(function(d) { 
    return (d[0].Close - d[0].Open)/d[0].Open; 
    }) 
    .map(csv); 

rect.filter(function(d) { 
    return d in data; 
    }) 
    .attr("class", function(d) { 
    return "day " + color(data[d]); 
    }) 
    .select("title") 
    .text(function(d) { 
    return d + ": " + percent(data[d]); 
    }); 
... 

확인 여기에 작업 예 - https://jsfiddle.net/levsha/2zp8y7r8/