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"} 
];