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

D3js线性色标，自定义日期位于页边距之上

1 个答案: