Javascript 布局：直接使用D3还是使用HTML中的div/span？_Javascript_Html_D3.js

Javascript 布局：直接使用D3还是使用HTML中的div/span？

javascript html d3.js

Javascript 布局：直接使用D3还是使用HTML中的div/span？,javascript,html,d3.js,Javascript,Html,D3.js,目前我的HTML上有两个D3生成的SVG，都在body标记中，我想在它们下面添加一行文本。当我只是将文本添加为D3元素时，它会与右边的SVG保持一致，但我希望它在下面。我试图添加一个div，但也不起作用。那么，我必须使用HTML或D3布局吗这就是我目前的解决方案：您必须在一个新窗口中打开vis，希望文本位于两个气泡云的正下方，而不是向右偏移谢谢你的问题似乎有两个部分：如何在图表下方定位文本？如何将两个图表相邻放置？要将文本放置在图表下方，请将图表div和文本div包装在包含div

目前我的HTML上有两个D3生成的SVG，都在body标记中，我想在它们下面添加一行文本。当我只是将文本添加为D3元素时，它会与右边的SVG保持一致，但我希望它在下面。我试图添加一个div，但也不起作用。那么，我必须使用HTML或D3布局吗

这就是我目前的解决方案：

您必须在一个新窗口中打开vis，希望文本位于两个气泡云的正下方，而不是向右偏移

谢谢

你的问题似乎有两个部分：

如何在图表下方定位文本？如何将两个图表相邻放置？要将文本放置在图表下方，请将图表div和文本div包装在包含div中。例如：

<div id='chart1-container'>
    <div id='chart1'></div>
    <div id='chart1-text'></div>
</div>

有几种方法可以将两个图表相邻放置。但是，我认为最简单的方法是使用CSS绝对定位包含div的部分。我为插图添加了宽度、高度和背景色：

<head>

<style>

#chart1-container, #chart2-container {
    width: 400px;
    height: 400px;
    background-color: steelblue;
}

#chart1-container {
    position: absolute;
    top: 10px;
    left: 10px;
}

#chart2-container {
    position: absolute;
    top: 10px;
    left: 420px;
}

</style>

</head>

<body>

    <div id='chart1-container'>
        <div id='chart1'></div>
        <div id='chart1-text'></div>
    </div>
    <div id='chart2-container'>
        <div id='chart2'></div>
        <div id='chart2-text'></div>
    </div>

</body>

在body标签中添加两个div

<div id="container1"></div>
<div id="container2"></div>

将svg附加到相应的id中，如下所示

var svg = d3.select("#"+target).append("svg")
        .attr("width", diameter)
        .attr("height", diameter)
        .attr("class", "bubble");

和文本作为

var svg2 = d3.select("#"+target).append("text")
        .text("# " + total)
        .attr("class", "text");

在样式标签中添加此css

.text {
  font: 10px sans-serif;
  font-size: 20px;
  padding-left: 150px;
}
#container1{
    float: left;
    width: 400px;
}
#container2{
    float: right;
    width: 400px;
}

希望这将帮助您

谢谢我在D3中找到了一个解决方案：

我将svg与.appendg绑定，然后将文本添加到g

var svg = d3.select("body").append("svg")
    .attr("width", diameter)
    .attr("height", diameter+140)
    .attr("class", "bubble")
    .append("g");

svg.append("text")
    .attr("x", 50)
    .attr("y", 435)
    .style("font-size","40px")
    .text("Test Text");

是的，我相应地更新了要点，但现在我有了新的一行：图表1，图表1文本，图表2，图表2文本。但是我想把两张图表并排放在一起，下面的文本分别放在一起。这更像是一个HTML/CSS问题。我已经相应地更新了我的答案。这不是实现您期望的结果的唯一方法，但我希望您觉得实现它足够简单！

.text {
  font: 10px sans-serif;
  font-size: 20px;
  padding-left: 150px;
}
#container1{
    float: left;
    width: 400px;
}
#container2{
    float: right;
    width: 400px;
}

var svg = d3.select("body").append("svg")
    .attr("width", diameter)
    .attr("height", diameter+140)
    .attr("class", "bubble")
    .append("g");

svg.append("text")
    .attr("x", 50)
    .attr("y", 435)
    .style("font-size","40px")
    .text("Test Text");