d3.js - 使用 d3js 可点击的气泡图中的四重层次结构

问题描述

我用 d3js 制作了一个气泡图，在层次结构中有三个比例级别，数据在 JSON 文件中，例如：

{
"name": "France",
"children": [
        {
        "name": "Auvergne-Rhône-Alpes"
    }, {
        "name": "Bourgogne-Franche-Comté"
    }, {
        "name": "Bretagne",
        "children": [
            {"name": "Côtes-d'Armor", "children": [
                {"name": "ville1", "population": 31960},
                {"name": "ville2", "population": 44021},
                {"name": "ville3", "population": 23821},
                {"name": "ville4", "population": 5819},
                {"name": "ville5", "population": 30729},
                {"name": "ville6", "population": 64913}
            ]}
               ]}
]}

（在法国：）国家、地区、部门和城市。

我需要在气泡图中做一个四重层次结构，但我只做了三个。因为第二个和第三个同时出现。我如何在我的代码中添加一个（分开的第二个和第三个）？

const diameter = 700, // Rendre diameter adaptater à l'écran
    format = d3.format(",d");

const svg = d3.select("#chart").append("svg")
    .attr("width", diameter)
    .attr("height", diameter)
    .attr("id", "svg");

const g = svg.append("g").attr("transform", "translate(2,2)");

const pack = d3.pack()
    .size([diameter - 4, diameter - 4]) // Related to previous translation
    .padding(1.5);

d3.json("donnee2.json").then(function(root) {
    root = d3.hierarchy(root)
        .sum(function(d) { return d.population; }) // La variable du JSON (à remplacer pour comparer la variable voulu)
        .sort(function(a, b) { return b.value - a.value; })

    var node = g.selectAll("g")
        .data(pack(root).descendants())
        .enter().append("g");
            // Attribuer les classes aux "g" des cercles

            node.attr("class", function(d, i) { if (i > 0) return d.children ? "node" : "leaf_node"; })
            .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; })
            .attr("text-anchor", "middle")
            .attr('fill', 'steelblue')
            .style("font", "10px sans-serif")
            .style("cursor", "pointer")
            .style("opacity", "0.6")
            .on("mouseover", function() { d3.select(this).attr("stroke", "white").style("stroke-width", "2px")})
            .on("mouseout", function() { d3.select(this).attr("stroke", null)});


    /********** HIERARCHY ***********/
    // Attributes of circles in terms of hierarchy

    function first_scale(){
    // Example: France

        node.filter(function(d, i) { if(i == 0) return d.children; }).append("circle")
            .attr("r", function(d) { return d.r; })
            .attr("id", function(d, i) {return "b_"+i })
            .on("dblclick", function() { second_scale()});

        node.filter(function(d, i) { if(i == 0) return d.children; }).append("title")
            //afficher les données du JSON
            .text(function(d) { return d.data.name + "\n" + format(d.value) })

        node.filter(function(d, i) { if(i == 0) return d.children; }).append("text")
            .attr("dy", "0.3em")
            .style('fill', 'white')
            .style("font", "30px sans-serif")
            .text(function(d) { return d.data.name.substring(0, d.r / 3); });
    }
    first_scale();

    function second_scale(){
    // Example: les Régions

        node.filter(function(d, i) { if(i > 0) return d.children; }).append("circle")
            .attr("r", function(d) { return d.r; })
            .attr("id", function(d, i) {return "b_"+i })
            .on("dblclick", function() { third_scale()});

        node.filter(function(d, i) { if(i > 0) return d.children; }).append("title")
            //afficher les données du JSON
            .text(function(d) { return d.data.name + "\n" + format(d.value) })

        node.filter(function(d, i) { if(i > 0) return d.children; }).append("text")
            .attr("dy", "0.3em")
            .style('fill', 'white')
            .text(function(d) { return d.data.name.substring(0, d.r / 3); });
    }

    function third_scale(){
    // Example: les Départements


        node.filter(function(d) { return !d.children; }).append("circle")
            .attr("r", function(d) { return d.r; })
            .attr("id", function(d, i) {return "b_"+i })
            .on("click", function() { d3.select(this).attr("fill", "white")});


        node.filter(function(d) { return !d.children; }).append("title")
            // Afficher les données du JSON
            .text(function(d) { return d.data.name + "\n" + format(d.value) })

        node.filter(function(d) { return !d.children; }).append("text")
            .attr("dy", "0.3em")
            .style('fill', 'white')
            .text(function(d) { return d.data.name.substring(0, d.r / 3); });

    }

/*
        function fourth_scale(){}

*/
});

http://zupimages.net/viewer.php?id=19/18/2e08.png

标签： d3.jshierarchybubble-chart

d3.js - 使用 d3js 可点击的气泡图中的四重层次结构

问题描述

解决方案

推荐阅读