Question

我在d3.js杂草中迷路了。我正在使用nvd3.js（http://i.stack.imgur.com/ghueS.png）组合一个图表。

但是，虽然图例中的颜色显示正确，但它们不在图表中。此外，悬停工具提示中存在显着的空白区域。

查看对象结构，我看起来像一层键太多，这让我觉得颜色问题和空白区域与我的实际键太深埋在对象中有关（{{3} }）。

我查看了nest（）和汇总（），但无法理解它们可能会有什么帮助。

我的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

enter image description here

格式化nvd3.js颜色和interactiveGuideLine

1 个答案: