d3.js - ペア棒グラフ d3.js を作成する

Question

棒グラフに 2 番目の一連のデータを追加するのに助けが必要です。現在、データセットのグロブキーからバーを作成しています。これが最初のシリーズになります。なりたいシリーズ第2弾はご当地編。それを追加するにはどうすればよいですか？

ここで私の JSFiddle で遊んでください。

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");