0

我需要帮助将第二组数据添加到我的条形图中。目前，我正在从数据集中的glob键填充条形图。这将是第一个系列。我想成为的第二个系列是本地的。我该如何添加呢？

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

1 回答 1

4

最简单的方法是为每组数据创建一个 svg group ( <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])

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

于 2013-04-23T01:38:40.103 回答