格式化 nvd3.js 颜色和交互式 GuideLine

Question

我在 d3.js 杂草丛中迷路了。我正在使用 nvd3.js (http://i.stack.imgur.com/ghueS.png).

制作图表

但是，虽然颜色在图例中看起来是正确的，但在图表中却不正确。此外，悬停工具提示中有显着的白色 space。

查看对象结构，我发现一层键看起来太多了，这让我觉得颜色问题和白色 space 与我的实际键埋得太深有关对象 (http://i.stack.imgur.com/k46CO.png).

我研究过 nest() 和 rollup()，但无法理解它们有何帮助。

我的javascript如下：

d3.csv("http://fwllc.wpstagecoach.com/wp-content/themes/frameworkcr/markers.csv",function(err,data){

var noDates = d3.keys(data[0]).filter(function(k){return k!="date"});
var dataToPlot = noDates.map(function(k){
      return {"key":k,
              "values":data.map(function(d){
       return {
         "x":d3.time.format("%m/%d/%y").parse(d.date),
         "y":+d[k]
       }
      })}
    })
    console.log(d3.entries(dataToPlot));
      nv.addGraph(function() {
        var chart = nv.models.lineChart()
            .margin({left: 100})  //Adjust chart margins to give the x-axis some breathing room.
            .useInteractiveGuideline(true)  //We want nice looking tooltips and a guideline!
           // .transitionDuration(350)  //how fast do you want the lines to transition?
            .showLegend(true)       //Show the legend, allowing users to turn on/off line series.
            .showYAxis(true)        //Show the y-axis
            .showXAxis(true)        //Show the x-axis

        ;

          chart.xAxis     //Chart x-axis settings
          .tickFormat(function(d) { return d3.time.format("%m/%d/%y")(new Date(d)); });

          chart.yAxis     //Chart y-axis settings
              .axisLabel('Total Return Percent')
              .tickFormat(d3.format('%'));

        d3.select('#chart').append("svg")
            .datum(dataToPlot)
            .call(chart);

        nv.utils.windowResize(function() { chart.update() });
        return chart;
      });

    })

还有我的 .csv 文件的一部分：

date,ESG,global100,outperformance
12/22/08,0,0,0
3/23/09,-0.059812891,-0.094081914,0.034269023
6/22/09,0.137426291,0.033160892,0.104265399
9/21/09,0.418041893,0.249191458,0.168850435
12/21/09,0.460914373,0.294278644,0.166635729
3/22/10,0.504442354,0.306489826,0.197952528

Answer 1

我把你的代码复制到plnkr里了，好像是对的...

<div id="chart" style="width:300px; height:300px"></div>

plnkr

格式化 nvd3.js 颜色和交互式 GuideLine

formatting nvd3.js colors and interactiveGuideLine

javascript

d3.js

nvd3.js