Question

我正在努力this example并尝试为其提供相同的功能，以便将画笔中的信息保留/排除为this example by Kai。

我已经查看了代码，显然，Kai的例子建立在D3的V.2之上（至少它调用的脚本就在那里）。因此，大多数坐标系不是基于d3.parcoords.js库。我的问题是，如何使用parcoords.js获得相同的结果？您是否认为需要修改parcoords.js以包含Kai的功能？我认为问题是Kai方法使用与parcoords.js方法冲突来绘制轴。

我查看了parcoords.js文档，并且没有迹象表明提取此信息的方法或功能，至少以相同的方式。我对javascript很新，但任何帮助都会受到赞赏。

编辑：

我尝试移植的代码部分位于最底层。

<!doctype html>
<title>Decision making tool</title>
<link rel="stylesheet" type="text/css" href="_/d3%20library/d3.parcoords.css">
<link rel="stylesheet" type="text/css" href="_/d3%20library/style.css">
<style>
    /* data table styles */

    #grid {
        height: 198px;
    }

    .row,
    .header {
        clear: left;
        font-size: 12px;
        line-height: 18px;
        height: 18px;
    }

    .row:nth-child(odd) {
        background: rgba(0, 0, 0, 0.05);
    }

    .header {
        font-weight: bold;
    }

    .cell {
        float: left;
        overflow: hidden;
        white-space: nowrap;
        width: 100px;
        height: 18px;
    }

    .col-0 {
        width: 180px;
    }
</style>

<script src="_/d3 library/d3.min.js"></script>
<script src="_/d3 library/d3.parcoords.js"></script>
<script src="_/d3 library/divgrid.js"></script>
<script src="_/script.js"></script>

//The header div includes the buttons that are shown below.
<div id="header">
    <h1>EUI assesment tool</h1>
    <button title="Zoom in on selected data" id="keep-data" disabled="disabled">Keep</button>
    <button title="Remove selected data" id="exclude-data" disabled="disabled">Exclude</button>
</div>
<div id="chart" class="parcoords" style="height:600px;"></div>
<div id="grid"></div>
<script id="brushing">
    // quantitative color scale

    var green_to_red = d3.scale.linear()
        .domain([40, 200])
        .range(["green", "red"])
        .interpolate(d3.interpolateLab);

    var color = function(d) {
        return green_to_red(d['Site EUI (kBtu/sq ft)']);
    };


    var parcoords = d3.parcoords()("#chart")
        .color(color)
        .margin({
            top: 50,
            left: 250,
            bottom: 20,
            right: 20
        })
        //  .composite('lighter')
        .alpha(0.25);

    // load csv file and create the chart
    d3.csv('_/data/Mock Data Chicago.csv', function(data) {
        parcoords
            .data(data)
            .hideAxis(["Property Name", "Address", "Community Area", "ZIP Code", "# of Buildings", "ENERGY STAR Score"])
            .mode("queue")
            .rate(30)
            .interactive()
            .render()
            .brushMode("1D-axes"); // enable brushing

        // create data table, row hover highlighting
        var grid = d3.divgrid();
        d3.select("#grid")
            .datum(data.slice(0, 5))
            .call(grid)
            .selectAll(".row")
            .on({
                "mouseover": function(d) {
                    parcoords.highlight([d])
                },
                "mouseout": parcoords.unhighlight
            });

        // update data table on brush event
        parcoords.on("brush", function(d) {
            d3.select("#grid")
                .datum(d.slice(0, 5))
                .call(grid)
                .selectAll(".row")
                .on({
                    "mouseover": function(d) {
                        parcoords.highlight([d])
                    },
                    "mouseout": parcoords.unhighlight
                });
        });
    });
//Below is the code I copied from Kai's version. I think the if statement is not returning information for the buttons above to enable
    if (selected.length < data.length && selected.length > 0) {
        d3.select("#keep-data").attr("disabled", null);
        d3.select("#exclude-data").attr("disabled", null);
    } else {
        d3.select("#keep-data").attr("disabled", "disabled");
        d3.select("#exclude-data").attr("disabled", "disabled");
    };

    function keep_data() {
        new_data = actives();
        if (new_data.length == 0) {
            alert("I don't mean to be rude, but I can't let you remove all the data.\n\nTry removing some brushes to get your data back. Then click 'Keep' when you've selected data you want to look closer at.");
            return false;
        }
        data = new_data;
        rescale();
    }

    // Exclude selected from the dataset
    function exclude_data() {
        new_data = _.difference(data, actives());
        if (new_data.length == 0) {
            alert("I don't mean to be rude, but I can't let you remove all the data.\n\nTry selecting just a few data points then clicking 'Exclude'.");
            return false;
        }
        data = new_data;
        rescale();
    }
</script>

if语句可能没有获取信息吗？

保持/排除平行坐标d3.js中的拉丝数据

0 个答案: