Question

在点击甜甜圈的特定切片后，我试图使图表的其余部分透明或将其设置为特定颜色。到目前为止，如果我对其工作的类型进行硬编码（我在开始时将其设置为null），那么在控制台中如此优秀的过滤器正在工作。我不知道为什么我无法获得单击的切片并将图表的其余部分设置为该特定颜色。我的问题是我必须以某种方式更新图表但是使用drawdata（）函数不起作用......

这是我的代码：

    var filter = {
    device: null,
    os_version: null,
    app_version: null
};

// Creating the object Doughnut
var Doughnut = function(type) {
    // Properties
    var width = 160;
    var height = 160
    var radius = Math.min(width, height) / 2;
    var donutWidth = 35;
    var legendRectSize = 18;
    var legendSpacing = 4;
    var type = type;

    // Array of Colors for the graph
    var color = d3.scale.category20c();
    var colorFunc = function(key) {

        var normalColor = color(key);

        if (filter[type] == null || key == filter[type]) {
            console.log("normal color")
            return normalColor;
        }
        console.log("trans color")
        return "#d5eff2";
    };

    // Graph Elements
    var chart = null;
    var svg = null;
    var path = null;
    var legend = null;



    // Our current dataSet
    var dataSet = null;

    // d3 functions
    var arc = d3.svg.arc()
        .innerRadius(radius - donutWidth)
        .outerRadius(radius);

    var pie = d3.layout.pie()
        .value(function(d) {
            return d.value;
        });

    // This is the initialize method - we create the basic graph, no data
    var initialize = function(chartElement){
        chart = chartElement;
        svg = d3.select(chart)
        .append('svg')
        .attr('width', width)
        .attr('height', height)
        .append('g')
        .attr('transform', 'translate(' + (width / 2) +
            ',' + (height / 2) + ')');
    };

    var update = function() {
        d3.json("./api/distribution/", function(data){
            dataSet = data;
            data.value = +data.value;
            drawData();
        });
    }

    var drawData = function() {
        path = svg.selectAll('path')
            .data(pie(dataSet[type]))
            .enter()
            .append('path')
            .attr('d', arc)
            .attr('fill', function(d) {
                return colorFunc(d.data.key);
            })
            .on('click', function(d) {
                if (filter[type] == d.data.key) {
                    filter[type] = null;
                } else {
                    filter[type] = d.data.key;
                }
                console.log(filter)
               // $(chart).empty()
               drawData();
            });

          createLegends();
    };


    var createLegends = function() {
        legend = svg.selectAll('.legend')
                .data(color.domain())
                .enter()
                .append('g')
                .attr('class', 'legend')
                .attr('transform', function(d, i) {
        var height = legendRectSize + legendSpacing;
        var offset = height * color.domain().length /2;
        var horz = -2 * legendRectSize;
        var vert = i * height - offset;
                    return 'translate(' + horz + ',' + vert + ')';
                });

        legend.append('rect')
               .attr('width', legendRectSize)
               .attr('height', legendRectSize)
               .style('fill', color)
               .style('stroke', color);

        legend.append('text')
               .attr('x', legendRectSize + legendSpacing)
               .attr('y', legendRectSize - legendSpacing)
               .text(function(d) {
                    return d;
               });
        };
        return{
            init: initialize,
            update: update
        }
};

    // Here we create instance of doughnuts
    var doughnutGraphs = (function() {

        var init = function() {
            // Create four doughnuts
            var doughnut1 = new Doughnut("device");
            var doughnut2 = new Doughnut("os_version");
            var doughnut3 = new Doughnut("app_version");

            // Initialize with an element
            doughnut1.init("#chart_1");
            doughnut2.init("#chart_2");
            doughnut3.init("#chart_3");

            // Update each of them with data
            doughnut1.update();
            doughnut2.update();
            doughnut3.update();
        };

        return {
            init: init
        }
        })();

Answer 1

我找到了答案：

创建一个方法来清理然后在drawdata（）

中调用它

var clean = function（）{ svg.selectAll（＆＃39;路径＆＃39）。除去（）;

并将其命名为.on（＆＃39;点击＆＃39;）

 .on('click', function(d) {
                if (filter[type] == d.data.key) {
                    filter[type] = null;
                } else {
                    filter[type] = d.data.key;
                }
                console.log(filter)
               // $(chart).empty()
                clean();
                drawData();
            });

D3彩色甜甜圈图表问题

1 个答案: