Question

我正在使用仪表板节点，但也希望显示动画。 D3对于动画来说是完美的，因此我想知道是否可以用D3填充Node-Red中的一组仪表板标签？

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.10.2/d3.min.js"></script>
<script src="https://rawgit.com/gka/d3-jetpack/master/d3-jetpack.js"></script>
<script>
var svg = d3.select("body")
    .append("svg")
    .attr("width", '800px')
    .attr("height", '800px');


var data = [{x: 100, y: 100, h: 10, w: 50, c: "red"}, {x: 200, y: 200, h: 20, w: 15, c: "yellow"}, {x: 300, y: 300, h: 60, w: 80, c: "green"}]

svg.selectAll("rect")
    .data(data)
    .enter().append("rect")
    .attr("x", function(d) { return d.x; })
    .attr("y", function(d) { return d.y; }) 
    .attr("width", function(d) { return d.w; })
    .attr("height", function(d) { return d.h; })
    .style("fill", function(d) { return d.c; })


//# sourceURL=userscript.js
</script>

Answer 1

为了在PID:8460代码中使用外部js libs，最好将src链接和html / css / svg代码放入单独的模板中。在第一个中，选择＆＃34; 添加到网站＆lt; head＆gt;栏目＆＃34;选项，并包括您的图书馆参考：

ui_template

然后，将另一个<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.10.2/d3.min.js"></script> <script src="https://rawgit.com/gka/d3-jetpack/master/d3-jetpack.js"></script>节点添加到您的信息中心标签/组，并包含以下代码：

ui_template

我对您的示例代码做了几处修改 -

对固定DOM元素使用CSS样式
使用唯一ID

<style>
    #myBoxes {
        height: 800px;
        width: 800px;
    }
</style>

<svg id="myBoxes">
    <!-- svg content goes here -->
</svg>

<script>
(function(scope) { 
    // watch for msgs from node-red
    scope.$watch('msg.payload', function(payload) {
        drawBoxes("myBoxes", payload);
    })
})(scope);

function drawBoxes(id, data) {
    var svg = d3.select("#" + id);
    var rect = svg.selectAll("rect")
        .data(data);

    rect.enter()
        .append("rect");

    rect.attr("x", function(d) { return d.x; })
        .attr("y", function(d) { return d.y; }) 
        .attr("width", function(d) { return d.w; })
        .attr("height", function(d) { return d.h; })
        .style("fill", function(d) { return d.c; });

    rect.exit()
        .remove();
}
</script>

包含角度<svg>以接收来自node-red
将D3逻辑放在一个新功能中，从范围观察器
使用D3输入/更新/退出选项来支持object constancy

以下是一个包含几个不同输入的示例流程：

scope.$watch(...)

Answer 2

您可以在模板节点中放置几乎所有内容。

值得注意的是，仪表板-ui使用Angular，因此您需要使用它以便能够使用传入的消息和数据。

如何在Node-Red中使用D3

2 个答案: