配对条形图中的访问键/值 - D3.js

我试图在我的JS对象/数组中创建glob和本地之间的配对条形图。我以前在D3中创建了条形图，但没有使用过对象。我发现很难访问正确的数据。配对条形图中的访问键/值 - D3.js

最终，关键字数据将在轴中使用。并且cpc将被用作工具提示。

下面是我到目前为止的代码：（or see my JSFiddle）

var w = 600; 
var h = 400; 

var colors = ["#377EB8", "#4DAF4A"]; 

var dataset = {"keyword": ["payday loans", "title loans", "personal loans"], 
      "glob": ["1500000", "165000", "550000"], 
      "local": ["673000", "165000", "301000"], 
      "cpc": ["14.11", "12.53", "6.14"] 
}; 


var series = 2; // Global & Local 

var x0Scale = d3.scale.ordinal() 
      .domain(d3.range(dataset.glob.length)) 
      .rangeRoundBands([0, w], 0.05); 


var yScale = d3.scale.linear() 
      .domain([0, d3.max(dataset, function(d) {return d.glob;})]) 
      .range([0, h]); 

var glob = function(d) { 
    return d.glob; 
}; 

//SVG element 
var svg = d3.select("#searchVolume") 
     .append("svg") 
     .attr("width", w) 
     .attr("height", h);  

// Graph Bars 
svg.selectAll("rect") 
    .data(dataset, glob) //access the series here? 
    .enter() 
    .append("rect") 
    .attr("x", function(d, i){ 
     return x0Scale(i); 
    }) 
    .attr("y", function(d) { 
     return h - yScale(d.glob); 
    }) 
    .attr("width", x0Scale.rangeBand()) 
    .attr("height", function(d) { 
     return yScale(d.glob); // *************** 
    }) 
    .attr("fill", colors[1]);

目前，图表没有得到填充。我假设我没有正确访问值。我只是试图从水珠获取数据，以确保我正确地访问的东西 - 然后从那里我去填充两个系列等是我的问题没有正确访问键/值？

来源

2013-04-22 EnigmaRM

我知道我的JSFiddle没有工作，这是我发布问题的原因之一 – EnigmaRM 2013-04-22 19:14:09

看看这个：http://jsfiddle.net/juY5E/2/

我能够通过改变.data(dataset, glob)到.data(dataset.glob)，然后改变d.glob到+d为获得三条杠的“Y” ATTR，在“高度” ATTR和yScale.domain

能够水珠和地方之间进行切换，你可能要重组的数据。

来源

2013-04-22 23:49:06

好的工作，我尝试了类似的东西，但不是'+ d'部分，我想我只是返回d。那么，这只是连接？ – EnigmaRM 2013-04-23 19:02:20

你是什么意思_to在glob和local之间切换，你可能想重组data_？最终我计划将Glob＆Local配对成一个集合，并让它们并排显示一个配对的条形图 – EnigmaRM 2013-04-23 19:03:24

RE + d - 是的，它会连接或返回NaN，具体取决于具体情况。至于数据结构评论，我误解了你的目标。。 – 2013-04-23 23:01:59

配对条形图中的访问键/值 - D3.js

回答

相关问题