D3 Bubble Chart: как заставить пузырьки расширяться при нажатии? - PullRequest
0 голосов
/ 02 марта 2020

Я довольно новичок в D3 и пытался создать простую пузырьковую диаграмму (бюджеты с учетом состояния), в которой можно щелкнуть по каждому пузырьку (состоянию) и расширить его до последующих дочерних данных. Я бы сделал макет дерева, но мне также нужно включить кнопку, которая будет обновлять данные на основе года.

Я только что создал простую пузырьковую диаграмму, включающую данные общего бюджета родителей, но я могу » Похоже, что выясняется, как заставить данные расширяться в последующие дочерние данные.

Примеры того, о чем я думаю:

https://knightfoundation.org/features/civictech/

https://www.theguardian.com/news/datablog/interactive/2011/oct/26/public-spending-uk-government-department

* 1016 Честно говоря, я полностью застрял. Буду признателен за любую небольшую помощь!

Вот код, который я использую

        var color = d3.scaleOrdinal(d3.schemeCategory20c);

        var bubble = d3.pack(dataset)
            .size([diameter, diameter])
            .padding(1.5);

        var svg = d3.select("body")
            .append("svg")
            .attr("width", diameter)
            .attr("height", diameter)
            .attr("class", "bubble");

        var nodes = d3.hierarchy(dataset)
            .sum(function(d) { return d.Count; });

        var node = svg.selectAll(".node")
            .data(bubble(nodes).descendants())
            .enter()
            .filter(function(d){
                return  !d.children
            })
            .append("g")
            .attr("class", "node")
            .attr("transform", function(d) {
                return "translate(" + d.x + "," + d.y + ")";
            });


        node.append("title")
            .text(function(d) {
                return d.Name + ": " + d.Count;
            });

        node.append("circle")
            .attr("r", function(d) {
                return d.r;
            })
            .style("fill", function(d,i) {
                return color(i);
            });

        node.append("text")
            .attr("dy", "3px")
            .style("text-anchor", "middle")
            .text(function(d) {
                return d.data.Name.substring(0, d.r / 3);
            })
            .attr("font-family", "sans-serif")
            .attr("font-size", function(d){
                return d.r/5;
            })
            .attr("fill", "white");

        node.append("text")
            .attr("dy", "20px")
            .style("text-anchor", "middle")
            .text(function(d) {
                return d.data.Count;
            })
            .attr("font-family",  "monospace")
            .attr("font-size", function(d){
                return d.r/5;
            })
            .attr("fill", "white");

        d3.select(self.frameElement)
            .style("height", diameter + "px");
...