创建配对条形图d3.js

Question

我需要帮助添加第二个系列的数据到我的条形图。目前，我正在从我的数据集中的glob键填充栏。这将是第一个系列。我想成为的第二个系列是local。我该怎么加呢?

在这里玩我的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");

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])

文本元素留给读者作为练习:)