Question

我正在尝试在d3.js中显示树图。我想使用json作为变量，而不是从文件加载。

var svg = d3.select("svg"), width = +svg.attr("width"), height = +svg
            .attr("height");

    var fader = function(color) {
        return d3.interpolateRgb(color, "#fff")(0.2);
    }, color = d3.scaleOrdinal(d3.schemeCategory20.map(fader)), format = d3
            .format(",d");

    var treemap = d3.treemap().tile(d3.treemapResquarify).size(
            [ width, height ]).round(true).paddingInner(1);


    var data = "{\"name\": \"wards\",\"children\": [{ \"name\": \"Parks\",\"children\": " +
    "[ {\"name\": \"Parks and Sports\", \"size\": 30},{\"name\": \"graph\",\"children\": " +
    "[{\"name\": \"Misc\", \"size\": 300}]}]}]}";

   /* d3.json(data1, function(error, data) {
        if (error)
            throw error;*/
    //var root = JSON.parse(data);

    var root = d3.hierarchy(data).eachBefore(
                function(d) {
                    d.data.id = (d.parent ? d.parent.data.id + "." : "")
                            + d.data.name;
                }).sum(sumBySize).sort(function(a, b) {
            return b.height - a.height || b.value - a.value;
        });

        treemap(root);

        var cell = svg.selectAll("g").data(root.leaves()).enter().append(
                "g").attr("transform", function(d) {
            return "translate(" + d.x0 + "," + d.y0 + ")";
        });

        cell.append("rect").attr("id", function(d) {
            return d.data.id;
        }).attr("width", function(d) {
            return d.x1 - d.x0;
        }).attr("height", function(d) {
            return d.y1 - d.y0;
        }).attr("fill", function(d) {
            return color(d.parent.data.id);
        });
    /*});

我已经尝试过将此代码显示为d3.js中的Tree map，但该代码无法正常工作。我想在树形图中将json读为变量，而不是从文件中加载并在悬停时显示值。我是树图的初学者。感谢您的帮助。

在Treemap d3.js中将json作为变量加载

0 个答案: