如何將CSS樣式表應用于D3力導向圖？-有解無憂

編輯：似乎不容易將 SemanticUI 樣式應用于 SVG 元素。接受的答案提供了對原始代碼的更正以及一些解決方法的想法。

我對網路開發很陌生。我正在嘗試使用 d3.js 創建一個圖形，并且我希望根據 SemanticUI 樣式表的“ui button tiny blue”類來設定節點的樣式。但是，當我將此類添加到 svg 中的節點時，它們并沒有全部顯示出來。在瀏覽器中檢查它們告訴我樣式已正確應用，但內容框由于某種原因具有負的高度和寬度。svg 外部的“TEST_NODE”按預期顯示。我究竟做錯了什么？

帶有行內 js-script 的 html 檔案：

<!DOCTYPE html>
<meta charset="utf-8">
<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj 3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script src="https://d3js.org/d3.v2.min.js?2.9.3"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"></script>
<style>

    .link {
        stroke: #aaa;
    }

</style>
<body>

<div class="content">
    <div class="ui button tiny blue">TEST_NODE</div>
</div>


<script>
    $(document).ready(function (){
        var width = 960,
            height = 500

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

        var force = d3.layout.force()
            .gravity(.05)
            .distance(100)
            .charge(-100)
            .size([width, height]);

        d3.json("d3_test.json", function(json) {
            force
                .nodes(json.nodes)
                .links(json.links)
                .start();

            var link = svg.selectAll(".link")
                .data(json.links)
                .enter().append("line")
                .attr("class", "link");

            var node = svg.selectAll(".node")
                .data(json.nodes)
                .enter()
                .append("g")
                .call(force.drag);

            node.append("div")
                .attr("class", "ui button tiny blue")
                .text("NODE")


            force.on("tick", function() {
                link.attr("x1", function(d) { return d.source.x; })
                    .attr("y1", function(d) { return d.source.y; })
                    .attr("x2", function(d) { return d.target.x; })
                    .attr("y2", function(d) { return d.target.y; });

                node.attr("transform", function(d) { return "translate("   d.x   ","   d.y   ")"; });
            });
        });
    });

</script>

</body>

uj5u.com熱心網友回復：

您的代碼有 2 個錯誤：

節點元素缺少類。通過以下方式修復它：

const node = svg.selectAll(".node")
  .data(json.nodes)
  .enter()
  .append("g")
  .classed("node", true)
  .call(force.drag);

您不能<div>在<g>. 您可以附加一個<text>：

node.append('rect')
  .attr('x', -50)
  .attr('y', -30)
  .attr('width', 100)
  .attr('height', 60)
  .style('fill', 'blue');

node.append('text')
  .classed('ui ...', true)
  .text('NODE')
  .attr('alignment-baseline', 'middle')
  .attr('text-anchor', 'middle')
  .style('fill', 'white');

...或在 a<div>下插入 a <foreignObject>;

轉載請註明出處，本文鏈接：https://www.uj5u.com/net/422078.html

標籤：

上一篇：打字稿：無法呼叫轉換和選擇聯合的selectAll：“此運算式不可呼叫。”

下一篇：使用d3顏色創建d3線性顏色圖例