페어링 된 막 대형 차트 작성 d3.js

Question

두 번째 데이터 계열을 막 대형 차트에 추가하는 데 도움이 필요합니다. 현재 내 데이터 집합의 글로브 키의 바를 채우고 있습니다. 이것은 첫 번째 시리즈가 될 것입니다. 두 번째 시리즈는 입니다. 추가하려면 어떻게해야합니까?

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 :

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

텍스트 요소

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

독자 :