Question

我正试图获得一些操纵经验一个SVG与d3.js，我被文字困住了。不知怎的，我无法改变文本的价值。

这是我试过的代码。

<!DOCTYPE html>
 <html>

<head>
    <meta charset="UTF-8">
    <title>FIXME</title>

    <script type="text/javascript" src="d3.js"></script>
    <link href="html5reset.css" type="text/css" rel="stylesheet">
     <link href="style.css" type="text/css" rel="stylesheet">
</head>

<body>

 <div class="container">
        <div id="insertTextHere">
        </div>
 </div>


<script type="text/javascript" src="script.js"></script>

</body>
</html>

只有一个html空白页面，里面有一个div。这是script：

var svg = d3.select(".chart").append("svg")
        .attr("width",  500)
        .attr("height", 250);
svg.append("text")
    .attr("x", 100)
    .attr("y", 100)
    .attr("rotate", 90)
    .attr("fill", "red")
    .attr("font-size",25)
    .node.textContent="test";

文本为空，我找不到更改其中文本的方法。有人能帮助我吗？

Answer 1

理解这个问题有点困难，

假设您要向SVG添加div并向其添加text节点并更改文本值。

这是一个可以为您完成的代码段。工作fiddle

<div class="chart">
</div>

<script>
var svg = d3.select('.chart')
.append('svg')
.attr({
 width : 300,
 height: 300,
})
.style('background-color' ,'green')
;

svg.append('text')
.attr({
x: 20,
y: 30
})
.text('Hello World')
;
</script>

使用javascript创建SVG文本（在空div中）

1 个答案: