d3.js - 使用 D3.js 来自同一数据对象的两个条形图

Question

我有这种类型的数据:

[
    {
        "techno":"mongodb", 
        "bu":"london",
        "level":3,
        "number":2, 
        "project": {   
            "level":4, 
            "number":5
        }
    }
]

我想根据这些数据并排创建 2 个条形图。

这是我的代码:

function draw(dataset) {
    //Largeur et hauteur du graphe

    var barPadding = 2; //Padding des barres
    var nbb = dataset.length;
    var larg = nbb * 30;
    var haut = 100;
    var lb = ((larg - nbb)/nbb);
    var hb = (haut / d3.max(dataset, function(d){
        return d.effectifs;
    }))

    //Create SVG element
    var svg = d3.select("body")
        .append("svg")
        .attr("width", larg)
        .attr("height", haut);

    svg.selectAll(".actuel")
        .data(dataset)
        .enter()
        .append("rect")
        .attr("class", "actuel")
        .attr("x", function(d, i) {
            return (i * lb); //Largeur de barre de 20 + 1 de padding
        })
        .attr("y", function(d) {
            return haut - (d.effectifs * hb); // Hauteur moins la valeur de la donnée
        })
        .attr("width", lb - barPadding)
        .attr("height", function(d) {
            return (d.effectifs * 200); // Valeur de la donnée
        })
        .attr("fill", function(d){
            return d3.rgb(255,(d.niveau)*50,255);
        });

    svg.selectAll("text")
        .data(dataset)
        .enter()
        .append("text")
        .text(function(d){
            return d.effectifs;
        })
        .attr("x", function(d,i){
            return (i * lb) + 12;
        })
        .attr("y", function(d,i){
            return haut -((d.effectifs * hb)-12);
        })
        .attr("font-family", "sans-serif")
        .attr("size", 12)
        .attr("fill", "white")
    }
</script>

有人知道如何进行吗？

Answer 1

不确定你的意思:

I want to create 2 bar charts side by side from this data.

1. 如果你想复制同一个图表，你可以使用 SVG 'use' 元素:

   • 文档:http://www.w3.org/TR/SVG/struct.html#UseElement
   • 此处示例 SVG use element to clone SVG

2. 如果您的问题是关于将两个图表放置在一起，请将您的图表包裹在容器中，然后将第二个容器平移到第一个容器旁边:

   var container1 = svg.append('g')
                            .attr('id','container1');
   
   var container2 = svg.append('g')
                            .attr('id', 'container2');
   
   container1.selectAll('.actuel')
             .data(dataset)...
             //Create the chart1 here
   
   container2.selectAll('.actuel')
             .data(dataset)...
             //Create the chart2 here
   
   container2.attr('transform','translate('+ svgWidth/2 +',0)'); //To move the g container to the right.
   

其中 svgWidth 是您为 svg 指定的宽度，假设您的图表使用一半的宽度。

希望这能回答您的问题!