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

不确定你的意思：

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

如果您想复制相同的图表，可以使用SVG＆＃39;使用＆＃39;元素：
- doc：http://www.w3.org/TR/SVG/struct.html#UseElement
- 示例SVG use element to clone SVG

如果您的问题是将两个图表彼此相邻放置，请将图表包装在容器中，并将第二个容器翻译到第一个容器旁边：

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的宽度，假设你的图表为自己使用了一半的宽度。

希望能回答你的问题！

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

1 个答案: