Четверная иерархия в пузырьковой диаграмме, активируемая с помощью d3js - PullRequest
Новая
       36

Четверная иерархия в пузырьковой диаграмме, активируемая с помощью d3js

0 голосов
/ 29 апреля 2019

Я сделал пузырьковую диаграмму с 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

1 Ответ

0 голосов
/ 02 мая 2019

Я нашел четыре иерархии:

  • node1 = node.filter (функция (d, i) {if (i == 0) возвращает d.children;})

  • node2 = node.filter (функция (d, i) {if (d.parent === root) возвращает d.children;})

  • node3 = node.filter (функция (d, i) {if (d.parent! == root && d! == root) возвращает d.children;})

  • node4 = node.filter (function (d) {return! d.children;});

...