2

我正在开发一个异常图，其中将有一个折线图，我需要 g=绘制一个点并将异常显示为点

截至目前，我能够绘制线图我的完整代码

怎么画点？？我的异常值与用于创建折线图的值相同

所有数据：

[
  {date:14/01/1990,value:23}, 
  {date:15/01/1990,value:24},  
  {date:16/01/1990,value:28},  
  {date:17/01/1990,value:30} 
]

异常数据：

[
   {date:14/01/1990,value:23}, 
   {date:17/01/1990,value:30},
]

这是我的代码：

 var svg = d3.select("svg"),
        margin = {top: 20, right: 20, bottom: 30, left: 50},
        width = +svg.attr("width") - margin.left - margin.right,
        height = +svg.attr("height") - margin.top - margin.bottom,
        g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");

    var parseTime = d3.timeParse("%d-%b-%y");

    var x = d3.scaleTime()
        .rangeRound([0, width]);

    var y = d3.scaleLinear()
        .rangeRound([height, 0]);



    var line = d3.line()
        .x(function(d) {
                return x(d.date); })
        .y(function(d) {
                return y(d.close); });
    x.domain(d3.extent(data, function(d) { return d.date; }));
               y.domain(d3.extent(data, function(d) { return d.close; }));

               g.append("g")
                   .attr("transform", "translate(0," + height + ")")
                   .call(d3.axisBottom(x))
                 .select(".domain")
                   .remove();
               g.append("g")
                   .call(d3.axisLeft(y))
                 .append("text")
                   .attr("fill", "#000")
                   .attr("transform", "rotate(-90)")
                   .attr("y", 6)
                   .attr("dy", "0.71em")
                   .attr("text-anchor", "end")
                   .text("xxx ($)");

               g.append("path")
                   .datum(data)
                   .attr("fill", "none")
                   .attr("stroke", "steelblue")
                   .attr("stroke-linejoin", "round")
                   .attr("stroke-linecap", "round")
                   .attr("stroke-width", 1.5)
                   .attr("d", line);
4

0 回答 0