javascript - D3JS Treemap 呈现但颜色不显示

Question

因此，在我移动 slider 之前，颜色不会显示在 TreeMap 中的各个节点上。我希望以前可能有人遇到过这个问题。

这是它背后的 JS。如果您希望我也发布该 css 文件，那么该文件非常小。

$(function () {
// Load templates       
$('.template').each(function () {
    var me = $(this);
    var src = me.attr('src');
    var data = $.get(src, function (template) {
        me.html(template);
    });
});
var slider = $('#sliderControl').slider({
    formatter: function (value) {
        return "Show errors over " + value.toFixed(0) + "% in red";
    }
});
var width = 0,
    height = 0;
function calcDim() {
    var container = $('#graph');
    width = container.width();
    height = width * 0.5;
    container.height(height);
};
calcDim();
var canvas = d3.select('#graph');
var scaleArr = buildColorScaleDomain();
var color = d3.scale.linear().domain(scaleArr).range(['#62A35D', '#D4FFD5', '#FEC5C7', '#D36461']).clamp(true);

var sizes = d3.scale.linear().domain([0, 10000]).range([1, 1000]).clamp(true);

// Use sig to scale from 0+ to decrease/increase the fidelity (higher) or speed (lower) of the graph
var sig = 5;
var resolution = Math.pow(10, sig);

var params = 'map?';
//if (provider.length > 0)
//    params += 'provider=' + provider + '&';
//if (version.length > 0)
//    params += 'version=' + version + '&';
//if (type.length > 0)
//    params += 'type=' + type + '&';
//if (dateBeg.length > 0)
//    params += 'dateBeg=' + dateBeg + '&';
//if (dateEnd.length > 0)
//    params += 'dateEnd=' + dateEnd + '&';
//Envision.Init();
var _url = '/api/report/' + params;
var urlParts = document.location.href.split("/");
_url = "/" + urlParts[3] + _url; 

d3.json(_url, function (data) {
    var treemap = d3.layout.treemap().size([100 * resolution, 100 * resolution]).value(getSelectedPerformanceValue()).sort(function (a, b) {
        return a.total - b.total;
    }).sticky(true);

    var node = canvas.data([{
        children: data
    }]).selectAll('.node').data(treemap).enter().append('div').attr('class', 'node').style('background', function (d) {
        return color(1 - d.quality_of_messages_received);
    }).call(position).attr('title', function (d) {
        return d.provider_desc;
    }).attr('data-content', function (d) {
        return "" + d.sending_facility + "<br>AA: " + d.AA_count + "<br>AE: " + d.AE_count + "<br>AR: " + d.AR_count + "<br>Total: " + d.total + "<br>Quality: " + ((d.quality_of_messages_received) * 100).toFixed(2) + "%<br>Errors: " + ((1 - d.quality_of_messages_received) * 100).toFixed(2) + "%<br>Grade: " + calcGrade(d);
    }).html(function (d) {
        return d.sending_facility;
    });

    slider.on('slide', function (ev) {
        var me = $(this);
        var scaleArr = buildColorScaleDomain();
        color.domain(scaleArr);
        canvas.selectAll('.node').style('background', function (d) {
            return color(1 - d.quality_of_messages_received);
        });
    });

    $(".node").popover({
        html: true,
        trigger: 'hover',
        placement: 'auto right',
        container: 'body'
    });

    $('#dataSelect').on('change', function (e) {
        node.data(treemap.value(getSelectedPerformanceValue()).nodes).call(position);
    });

    $(window).on('resize', function (e) {
        calcDim();
    });


    ko.applyBindings(new function () {
        var self = this;
        this.data = data;
        this.getDataRows = function () {
            return self.data;
        };
        this.getProviderName = function (data) {
            return data.provider_desc;
        };
        this.getProviderVolume = function (data) {
            return data.total;
        };
        this.getProviderErrors = function (data) {
            return "" + ((1 - data.quality_of_messages_received) * 100).toFixed(0) + "%";
        };
        this.getProviderGrade = function (data) {
            return calcGrade(data);
        };
    });
});


function position() {
    this.style('left', function (d) {
        if (d.children) return;
        return (d.x / resolution) + '%';
    }).style('top', function (d) {
        if (d.children) return;
        return (d.y / resolution) + '%';
    }).style('width', function (d) {
        if (d.children) return;
        return (d.dx / resolution) + '%';
    }).style('height', function (d) {
        if (d.children) return;
        return (d.dy / resolution) + '%';
    }).style('font-size', function (d) {
        if (d.children) return;
        return (Math.min(d.dx, d.dy) / resolution) + "%";
    });
}

function getSelectedPerformanceValue() {
    var fn = function (value) {
        return function (d) {
            return d[value];
        }
    };
    var me = $('#dataSelect :selected');
    var val = me.val().toLowerCase().trim();
    switch (val) {
        case "total":
            fn = fn('total');
            break;
        case "aa":
            fn = fn('AA_count');
            break;
        case "ae":
            fn = fn('AE_count');
            break;
        case "ar":
            fn = fn('AR_count');
            break;
        case "quality":
            fn = function (d) {
                return d.quality_of_messages_received;
            };
            break;
        case "errors":
            fn = function (d) {
                return 1 - d.quality_of_messages_received;
            };
            break;
        default:
            fn = fn('total');
            break;
    }
    return fn;
}

function buildColorScaleDomain() {
    var slideValue = slider.data('slider').getValue();
    var outerLimits = 10;
    var bottom = 0.001;
    var a0 = Math.max(slideValue - (outerLimits * 2), 0); // greener
    var a1 = Math.max(slideValue - outerLimits, bottom);
    var a2 = Math.max(slideValue, bottom * 2); // redder
    var arr = [a0 / 100, a1 / 100, a1 / 100, a2 / 100];
    return arr;
}

function calcGrade(data) {
    var quality = Math.floor(data.quality_of_messages_received * 10).toFixed(0);
    switch (quality) {
        case '10':
        case '9':
            return "A";
        case '8':
            return "B";
        case '7':
            return "C";
        case '6':
            return "D";
        default:
            return "F";
    };
}

})

Answer 1

我相信我为您提供了更简洁的解决方案。看看我的视频 here .我还介绍了 D3Js 的其他一些巧妙功能。这是我第一次开始使用 D3JS 时发现的一个很棒的教程 https://www.dashingd3js.com/table-of-contents