創建配對條形圖d3.js

Question

我需要幫助將第二系列數據添加到我的條形圖中。目前我正在填充我的數據集中的glob鍵的條形圖。這將是第一個系列。我希望成爲的第二個系列是當地。 我如何着手添加？

Play with my JSFiddle here。

var w = 300; 
var h = 200; 

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

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

var data = [[1500000, 165000, 550000], 
     [673000, 165000, 301000]]; 

var tdata = d3.transpose(dataset.glob, dataset.local); 

var series = 2; // Global & Local 

var x0Scale = d3.scale.ordinal() 
      .domain(d3.range(dataset.length)) 
      .rangeRoundBands([0, w], 0.05); 
var x1Scale = d3.scale.ordinal() 
      .domain(d3.range(dataset.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; 
}; 
var cpc = function(d) { 
return d.cpc; 
}; 

var commaFormat = d3.format(','); 

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

// Graph Bars 
svg.selectAll("rect") 
.data(dataset, cpc, glob) 
.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]) 
.on("mouseover", function(d) { 
    //Get this bar's x/y values, then augment for the tooltip 
    var xPosition = parseFloat(d3.select(this).attr("x")) + x0Scale.rangeBand()/3; 
    var yPosition = parseFloat(d3.select(this).attr("y")) + yScale; 

    //Update Tooltip Position & value 
    d3.select("#tooltip") 
     .style("left", xPosition + "px") 
     .style("top", yPosition + "px") 
     .select("#cpcVal") 
     .text(d.cpc); 
    d3.select("#tooltip").classed("hidden", false); 
}) 
.on("mouseout", function() { 
    //Remove the tooltip 
    d3.select("#tooltip").classed("hidden", true); 
}); 

//Create labels 
svg.selectAll("text") 
    .data(dataset, glob) 
    .enter() 
.append("text") 
.text(function(d) { 
    return commaFormat(d.glob); 
}) 
.attr("text-anchor", "middle") 
.attr("x", function(d, i) { 
    return x0Scale(i) + x0Scale.rangeBand()/2; 
}) 
.attr("y", function(d) { 
    return h - yScale(d.glob) + 14; 
}) 
.attr("font-family", "sans-serif") 
.attr("font-size", "11px") 
.attr("fill", "white"); 

Answer 1

這是最簡單的創建SVG組（<g>）對於每一組數據元素，然後各部件添加到每個組。例如，大致爲：

http://jsfiddle.net/WXMwv/1/

var sets = svg.selectAll(".set") 
    .data(dataset) 
    .enter().append("g") 
      .attr("class","set") 
    .attr("transform",function(d,i){ 
     return "translate(" + x0Scale(i) + ",0)" 
    }) 
    .on("mouseover", function(d,i) { 
     //Create x value from data index 
     var xPosition = parseFloat(x0Scale(i) + x0Scale.rangeBand()/6); 
     var yPosition = 0; 
     //Update Tooltip Position & value 
     d3.select("#tooltip") 
      .style("left", xPosition + "px") 
      .style("top", yPosition + "px") 
      .select("#cpcVal") 
      .text(d.cpc); 
     d3.select("#tooltip").classed("hidden", false); 
    }) 
    .on("mouseout", function() { 
     //Remove the tooltip 
     d3.select("#tooltip").classed("hidden", true); 
    }); 

sets.append("rect") 
    .attr("class","glob") 
    .attr("width", x0Scale.rangeBand()/2) 
    .attr("y", function(d) { 
     return yScale(d.glob); 
    }) 
    .attr("height", function(d){ 
     return h - yScale(d.glob); 
    }) 
    .attr("fill", colors[1]) 

sets.append("rect") 
    .attr("class","local") 
    .attr("width", x0Scale.rangeBand()/2) 
    .attr("y", function(d) { 
     return yScale(d.local); 
    }) 
    .attr("x", x0Scale.rangeBand()/2) 
    .attr("height", function(d){ 
     return h - yScale(d.local); 
    }) 
    .attr("fill", colors[0]) 

的文本元素被作爲練習留給讀者:)