D3js 여백 위쪽에 사용자 정의 날짜가있는 선형 색상 스케일

Question

d3.js를 사용하여 선 그래프를 그리지 만 색상 범례 또는 (사용자 정의) 범례를 과 같이 날짜순으로 추가하는 방법은 ....... ...................................... 날짜 날짜 ........ .. ..................................... ... 주어진 코드는 아래와 같습니다.

`function updateData(){ 
var data = [ 
{date:"1-May-12",close:"58.13","open":"34.13"}, 
{date:"30-Apr-12",close:"53.98","open":"74.73"}, 
{date:"27-Apr-12",close:"67.00","open":"50.63"}, 
{date:"26-Apr-12",close:"89.70","open":"45.23"}, 
{date:"25-Apr-12",close:"99.00","open":"70.33"} 
]; 
var parseDate = d3.time.format("%d-%b-%y").parse; 
var formatTime = d3.time.format("%e %B"); 
data.forEach(function(d) { 
d.date = parseDate(d.date); 
d.close = +d.close; 
d.open=+d.open; 
}); 
//console.log(data) 
var margin = {top: 30, right: 40, bottom: 70, left: 50}, 
width = 600 - margin.left - margin.right, 
height = 270 - margin.top - margin.bottom; 

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

var xAxis=d3.svg.axis().scale(x) 
.orient("bottom").ticks(20) 
var yAxis=d3.svg.axis().scale(y) 
.orient("left").ticks(10) 

var valueline = d3.svg.line() 
.x(function(d) { return x(d.date); }) 
.y(function(d) { return y(d.close); }); 

var div = d3.select("body") 
    .append("div") 
    .attr("class", "tooltip")    
    .style("opacity", 0); 

var canvas = 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 +")"); 

x.domain(d3.extent(data, function(d) { return d.date; })); 
y.domain([0, d3.max(data, function(d) { return Math.max(d.close); })]); 

canvas.append("g") 
.attr("class", "x axis") 
.attr("transform", "translate(0," + height + ")") 
.call(xAxis) 
.selectAll("text") 
.style("text-anchor", "end") 
.attr("dx", "-.8em") 
.attr("dy", ".15em") 
.attr("transform", function(d) { 
return "rotate(-65)" 
}); 

canvas.append("g") 
.attr("class", "y axis") 
.style("fill", "steelblue") 
.call(yAxis); 

canvas.append("path") 
.attr("class", "line") 
.style("stroke","green") 
.style("stroke-dasharray", ("10, 10")) 
.attr("d", valueline(data)); 

canvas.selectAll("dot") 
.data(data) 
.enter().append("circle") 
.style("fill","red") 
.attr("r","3.5") 
.attr("cx",function (d,i){return x(d.date);}) 
.attr("cy",function(d,i){return y(d.close);}) 
.on("mouseover", function(d) {  
      div.transition()   
       .duration(200)  
       .style("opacity", .9);  
      div .html(formatTime(d.date) + "<br/>" + d.close) 
       .style("left", (d3.event.pageX) + "px")  
       .style("top", (d3.event.pageY-28) + "px");  
      })     
     .on("mouseout", function(d) {  
      div.transition()   
       .duration(500)  
       .style("opacity", 0); 
     }); 
} 

var inter = setInterval(function() { 
updateData(); 
}, 5000); 
` 

Answer 1

귀하의 질문을 완전히 이해할 수 있을지 잘 모르겠습니다. 각 도트에 색상 범례를 추가하고 싶습니까? 이

fiddle은 당신이 원하는 또는 있는지 는 질문 :

//Here using the custom color adding into the data array, 
//you can also use random color by d3 api 
var data = [ 
    {date:"1-May-12",close:"58.13","open":"34.13", "color": "red"}, 
{date:"30-Apr-12",close:"53.98","open":"74.73", "color": "blue"}, 
{date:"27-Apr-12",close:"67.00","open":"50.63", "color": "green"}, 
{date:"26-Apr-12",close:"89.70","open":"45.23", "color": "yellow"}, 
{date:"25-Apr-12",close:"99.00","open":"70.33", "color": "cygan"} 
];