格式化nvd3.js顏色和interactiveGuideLine

我已經迷失在d3.js雜草中。我正在使用nvd3.js（http://i.stack.imgur.com/ghueS.png）製作圖表。格式化nvd3.js顏色和interactiveGuideLine

但是，雖然顏色在圖例中顯示正確，但它們不在圖表中。此外，懸停工具提示中還有很大的空白區域。看看對象結構，看起來像是一層太多的按鍵，這讓我覺得顏色問題和空白區域與我的實際按鍵太深埋在對象中有關（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

來源

2015-04-15 Darius

我複製你的代碼到plnkr，它似乎是正確的......

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

plnkr

enter image description here

來源

2015-04-15 07:27:07

哈！引人入勝，而且很好。有一些舊的和錯誤的.css離開我的圖表（和我）藍色 - 以及一些表格.css添加我通過使用Chrome調試器訪問的空白空白，使用F8凍結交互式指南懸停狀態並搜索nvtooltip類。 – Darius

格式化nvd3.js顏色和interactiveGuideLine

回答

相關問題