无法获取要使用新JSON数据呈现的树映射_Json_D3.js_Treemap

无法获取要使用新JSON数据呈现的树映射

json d3.js

无法获取要使用新JSON数据呈现的树映射,json,d3.js,treemap,Json,D3.js,Treemap,我正在使用d3.jstreemap在带有backbone.js的应用程序中。treemap使用第一个JSOn数据正确呈现，但是使用不同JSOn数据的后续调用不会导致treemap重新呈现我的HTML如下所示： <html> <head> <title>Jenkins analytics</title>  <link rel="stylesheet" href="c

我正在使用

d3.js

treemap

在带有

backbone.js

的应用程序中。treemap使用第一个JSOn数据正确呈现，但是使用不同JSOn数据的后续调用不会导致treemap重新呈现

我的HTML如下所示：

<html>
<head>
    <title>Jenkins analytics</title>

    <!-- stylesheets -->
    <link rel="stylesheet" href="css/spa.css" type="text/css"/>
    <link rel="stylesheet" href="css/treemap.css" type="text/css"/>
</head>

<body>
    <nav>
        <form>
            <fieldset>
                <label for="chart">Chart:</label>
                <select id="chart" name="chart">
                    <option value="treemap" selected>Treemap</option>
                    <option value="motion">MotionChart</option>
                </select>
            </fieldset>
        </form>
        <form>
            <fieldset>
                <label for="period">Period:</label>
                <select id="period" name="period">
                    <option value="lastday" selected>Day</option>
                    <option value="lastweek">Week</option>
                    <option value="lastmonth">Month</option>
                </select>

                <label for="team">Team:</label>
                <select id="team" name="team">
                    <option value="all" selected>all</option>
                    <option value="spg">spg</option>
                    <option value="beacon">beacon</option>
                    <option value="disco">disco</option>
                </select>

                <label for="status">Status:</label>
                <select id="status" name="status">
                    <option value="" selected>all</option>
                    <option value="SUCCESS">success</option>
                    <option value="FAILURE">failure</option>
                    <option value="ABORTED">aborted</option>
                </select>
            </fieldset>
        </form>
        <form>
            <fieldset>
                <label for="duration">Duration</label>
                <input id="duration" type="radio" name="mode" value="size" checked />

                <label for="count">Count</label>
                <input id="count" type="radio" name="mode" value="count" />

                <label for="average">Average</label>
                <input id="average" type="radio" name="mode" value="avg" />
            </fieldset>
        </form>
    </nav>

    <div id="container" />

    <!-- Third party javascript -->
    <script type="text/javascript" src="http://code.jquery.com/jquery-2.0.3.min.js" charset="utf-8"></script>
    <script type="text/javascript" src="script/underscore/underscore.js" charset="utf-8"></script>
    <script type="text/javascript" src="script/backbone/backbone.js" charset="utf-8"></script>
    <script type="text/javascript" src="script/d3/d3.v3.js" charset="utf-8"></script>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>

    <!-- Application javascript -->
    <script type="text/javascript" src="script/module.js"></script>

    <!-- Startup -->
    <script>
        var navview = new NavViewer();
    </script>
</body>
</html>

var NavViewer = Backbone.View.extend({
    el: 'nav',

    events: {
        "change #chart": "change_chart",
        "change #period": "change_period",
        "change #team": "change_team",
        "change #status": "change_status"
    },

    initialize: function() {
        console.log("NavViewer.initialize");
        this.d3view = new D3Viewer();
        this.active_view = this.d3view;
    },

    change_chart: function(e) {
        console.log("NavViewer.change_chart");
    },
    change_period: function(e) {
        var _period = $('#period').val();
        console.log("NavViewer.change_period to " + _period);
        this.active_view.load();
    },
    change_team: function(e) {
        var _team = $('#team').val();
        console.log("NavViewer.change_team to "+ _team);
        this.active_view.load();
    },
    change_status: function(e) {
        var _status = $('#status').val();
        console.log("NavViewer.change_status to " + _status);
        this.active_view.load();
    }
});

var JenkinsViewer = Backbone.View.extend({
    el: '#container',
    server: "http://192.168.1.100:5000",
    url_fragment: function() {
        var _period = $('#period').val();
        var _team = $('#team').val();
        var _status = $('#status').val();
        return "when=" + _period +
            (_team == "all" ? "" : ("&" + "team=" + _team)) +
            (_status == "" ? "" : ("&" + "status=" + _status));
    }
});

var D3Viewer = JenkinsViewer.extend({
    initialize: function() {
        this.margin = {top: 8, right: 0, bottom: 0, left: 0};
        this.width = 1200 - this.margin.left - this.margin.right;
        this.height = 800 - this.margin.top - this.margin.bottom - 60;
        this.container = d3.select(this.el);
        this.color = d3.scale.category20c();
        this.base_url = this.server + "/team_build";

        this.treemap = d3.layout.treemap()
            .size([this.width, this.height])
            .sticky(true)
            .value(function(d) { return d.size; });

        this.position = function() {
            this.style("left", function(d) { return d.x + "px"; })
                .style("top", function(d) { return d.y + "px"; })
                .style("width", function(d) { return Math.max(0, d.dx - 1) + "px"; })
                .style("height", function(d) { return Math.max(0, d.dy - 1) + "px"; });
        };

        /* style the container */
        this.container
            .style("position", "relative")
            .style("width", this.width + "px")
            .style("height", this.height + "px")
            .style("left", this.margin.left + "px")
            .style("top", this.margin.top + "px")
            .style("border", "1px solid black");

        /* tootlip is appended to container */
        this.tooltip = this.container.append("div")
            .attr('class', 'tooltip')
            .style("visibility", "hidden")
            .style("background-color", "#ffffff");

        this.load();
    },

    load: function() {
        var $container = this.container;
        var color = this.color;
        var treemap = this.treemap;
        var position = this.position;
        var tooltip = this.tooltip;
        var url = this.base_url + "?" + this.url_fragment();

        console.log("D3View.load: " + url);

        d3.json(url, function(error, root) {
            /* 'root' actually means the data retrieved by the xhr call */
            var node = $container.datum(root)
                .selectAll(".node")
                .data(treemap.nodes);

            node.enter().append("div")
                .attr("class", "node")
                .call(position)
                .style("background", function(d) { return d.children ? color(d.name) : null; })
                .text(function(d) { return d.children ? null : d.name; })
                .on("mouseover", function(d) {
                    tooltip.html(d.name + ": " + Math.floor(d.value))
                      .style("visibility", "visible");
                    this.style.cursor = "hand";
                })
                .on("mouseout", function(){
                    tooltip.style("visibility", "hidden");
                });

            d3.selectAll("input").on("change", function change() {
                var functions = {
                    count: function(d) { return d.count; },
                    size: function(d) { return d.size; },
                    avg: function(d) { return d.size / d.count; }
                };
                var value = functions[this.value];

                node
                    .data(treemap.value(value).nodes)
                .transition()
                    .duration(1500)
                    .call(position);
            });
        });

        return true;
    }
});

以下是我所做的事情：

阅读d3.json和d3.layout.treemap的
```
d3.js
```
代码
用谷歌搜索出了生活的曙光
阅读
读一些文章：
已尝试
```
treemap.sticky（false）
```
已尝试添加
```
node.exit（）.remove（）
```

我认为问题可能与粘性或缺少调用

node.exit（）.remove（）

有关。我尝试过修改这两个，但都没有成功。但是，要获得交互式客户端UI，我认为需要使用

treemap.sticky（true）

我已经确认，每次点击RESTAPI服务时，我都会得到不同的JSON。我已经确认

container.datum（）.children

在调用之间的大小会发生变化，这对我来说是一个树映射不重新渲染的问题

D3.js：如何处理动态JSON数据

看起来非常相关：

“值得一提的是，如果您已经拥有具有相同密钥的数据，d3.js将在节点中存储数据，但仍将使用原始数据。”
“当我开始使用d3.js时，我认为渲染数据会发生事件，并对我的比例、域等的更改做出反应。事实并非如此。你必须告诉d3.js更新当前内容，否则它将留在那里，不同步。”
“我将data（）的结果赋给变量，因为enter（）只影响未绑定到节点的新数据。”

load

load: function() {
    var $container = this.container;
    var color = this.color;
    var treemap = this.treemap;
    var position = this.position;
    var tooltip = this.tooltip;
    var url = this.base_url + "?" + this.url_fragment();

    console.log("D3View.load: " + url);

    d3.json(url, function(error, root) {
        var tooltip_mouseover = function(d) {
            tooltip.html(d.name + ": " + Math.floor(d.value))
              .style("visibility", "visible");
            this.style.cursor = "hand";
        };
        var tooltip_mouseout = function(){
            tooltip.style("visibility", "hidden");
        };
        var background_color = function(d) { return d.children ? color(d.name) : null; };
        var text_format = function(d) { return d.children ? null : d.name; };

        /*
         * Refresh sticky bit
         * https://github.com/mbostock/d3/wiki/Treemap-Layout
         * "Implementation note: sticky treemaps cache the array of nodes internally; therefore, it
         * is not possible to reuse the same layout instance on multiple datasets. To reset the
         * cached state when switching datasets with a sticky layout, call sticky(true) again."
         */
        treemap.sticky(true);

        /* 'root' actually means the data retrieved by the xhr call */
        var nodes = $container.datum(root)
            .selectAll(".node")
            .data(treemap.nodes);

        var enter = nodes.enter().append("div")
            .attr("class", "node")
            .call(position)
            .style("background", background_color)
            .text(text_format)
            .on("mouseover", tooltip_mouseover)
            .on("mouseout", tooltip_mouseout);

        var exit = nodes.exit().remove();

        var update = nodes.style("background", background_color)
            .call(position)
            .text(text_format);

        d3.selectAll("input").on("change", function change() {
            var functions = {
                count: function(d) { return d.count; },
                size: function(d) { return d.size; },
                avg: function(d) { return d.size / d.count; }
            };
            var value = functions[this.value];

            $container.selectAll(".node")
                .data(treemap.value(value).nodes)
            .transition()
                .duration(1500)
                .call(position);
        });
    });

重置树映射粘滞位
对新的/丢失的/更改的节点/数据使用输入/退出/更新选项

enter

node

div

exit

update

节点时引用该div类。如果在这些位置的节点类
上添加进一步的选择，则您的选择将为空，退出
和更新
代码将为无操作
感谢您发布了一条非常有用的评论，并链接到她撰写的答案
其他有用的内容如下：



需要澄清的是：对于初始和后续数据调用，您是否使用相同的load（）
函数？因为它只在新元素上设置属性，而不在数据已更改的现有元素上设置属性。请阅读此答案以获得更详细的解释：@AmeliaBR：是的，我使用的是相同的load（）
。我将修复这个星期六并发布更正后的代码。不过，由于这显然是剪切粘贴的代码，如果这个D3示例也使用了最佳实践，那就太好了。非常感谢您的帮助。不幸的是，大多数示例和教程只设计用于演示代码的一个方面，而倾向于略过其他方面。因此，他们展示了如何布置树形图，而不是如何更新它，或者类似的东西。如果你从非常简单的事情开始，一步步向上，那么你就会知道你需要适应什么。但是大多数人都想跳进复杂的可视化示例中，然后不知道代码中哪里出了问题。@hughdbrown，是的，真的，为什么你从他那里复制代码的这个人没有写出你需要的东西？给他发电子邮件，给他一个$#$%，告诉他下次他写一个例子时，他应该更了解。对于你所做的每件事，网络上都应该有一个例子，这样你就可以复制/粘贴了，对吗？…@lividd：谢谢你花时间发表你的嘲讽。让我明确一点：我非常感谢操作系统开发人员以及他们在库和文档中所做的工作。我知道我的工作效率更高。既然你已经在d3.js上回答了50个问题，你和我一样知道这不仅仅是“某个家伙”。D3API在呈现新数据的方式上非常不规则。例如，将其与谷歌的数据可视化进行比较。如果我在编写示例代码，我会强调这一点。因此，出于很多原因，我发现自己不同意你的观点。很高兴你能弄明白这一点，感谢你回来发布你的解决方案，并为其他人提供好的参考。更新过程是一个很容易混淆的过程，但是一旦你完全理解它，它就会变成自动的，并且很容易忘记它在开始时是多么混淆！