Fatal编程技术网
  • javascript/
  • Javascript 为什么可以'；我是否使用D3在一个HTML页面中显示多个图形？

Javascript 为什么可以'；我是否使用D3在一个HTML页面中显示多个图形？

javascript html d3.js

Javascript 为什么可以'；我是否使用D3在一个HTML页面中显示多个图形？,javascript,html,d3.js,Javascript,Html,D3.js,标题。我是个笨蛋，这已经让我沮丧了两天了。不知道我做错了什么。D3令人沮丧 我试图在一个页面中创建多个图形。目前，仅显示1个条形图。我有不同的div，每个div都有自己独特的ID，所以不确定这里出了什么问题。除此之外，出于某种奇怪的原因，我无法在我试图创建的条形图中的条形图中添加任何文本 <!DOCTYPE html> <html lang="en"> <head> <script src="https://d3js

标题。我是个笨蛋，这已经让我沮丧了两天了。不知道我做错了什么。D3令人沮丧

我试图在一个页面中创建多个图形。目前，仅显示1个条形图。我有不同的div，每个div都有自己独特的ID，所以不确定这里出了什么问题。除此之外，出于某种奇怪的原因，我无法在我试图创建的条形图中的条形图中添加任何文本

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="https://d3js.org/d3.v4.min.js"></script>
</head>
TESTING

<body>
<div id="chart1" style = "position:static; left: 420px; bottom: 10px; float:left">                                            
    <h4>Positivity</h4>
    <script>
        const dataset1 = [32, 45, 22, 26, 23, 18, 29, 14, 9];

        const w = 500;
        const h = 100;

        const chart1 = d3.select("#chart1")
                    .append("svg")
                    .attr("width", w)
                    .attr("height", h);

        chart1.selectAll("rect")
        .data(dataset1)
        .enter()
        .append("rect")
        .attr("x", (d, i) => i * 30)
        .attr("y", (d, i) => h - 3 * d)
        .attr("width", 25)
        .attr("height", (d, i) => 3 * d)
        .attr("fill", "navy");

        chart1.selectAll("text")
        .data(dataset)
        .enter()
        .append("text")
        .attr("x", (d,i)=>i*30)
        .attr("y", (d,i)=>{return (h-(d*3)-3);})
        .text(function (d){return d;});
    </script>
   
</div>

<div id="chart2" style = "position:relative; left: 50px; bottom:0px; float:center">                                            
    <h4>Motivation</h4>
    <script>
        const dataset2 = [12, 31, 22, 17, 25, 18, 29, 14, 9];

        const w = 500;
        const h = 100;

        const svg2 = d3.select("#chart2")
                    .append("svg")
                    .attr("width", w)
                    .attr("height", h);

        svg2.selectAll("rect")
        .data(dataset2)
        .enter()
        .append("rect")
        .attr("x", (d, i) => i * 30)
        .attr("y", (d, i) => h - 3 * d)
        .attr("width", 25)
        .attr("height", (d, i) => 3 * d)
        .attr("fill", "navy");

        svg2.selectAll("text")
        .data(dataset)
        .enter()
        // Add your code below this line
        .append("text")
        .attr("x", (d,i)=>i*30)
        .attr("y", (d,i)=>{return (h-(d*3)-3);})
        .text(function (d){return d;});

        // Add your code above this line
    </script>
   
</div>

</body> 


测试
积极性
常量数据集1=[32,45,22,26,23,18,29,14,9]；
常数w=500；
常数h=100；
常量图表1=d3。选择（“图表1”）
.append（“svg”）
.attr（“宽度”，w）
.attr（“高度”，h）；
图表1.选择全部（“rect”）
.数据（数据集1）
.输入（）
.append（“rect”）
.attr（“x”，（d，i）=>i*30）
.attr（“y”，（d，i）=>h-3*d）
.attr（“宽度”，25）
.attr（“高度”，（d，i）=>3*d）
.attr（“填充”、“海军”）；
图表1.选择全部（“文本”）
.数据（数据集）
.输入（）
.append（“文本”）
.attr（“x”，（d，i）=>i*30）
.attr（“y”，（d，i）=>{return（h-（d*3）-3）；}）
.text（函数（d）{return d；}）；
动机
常量数据集2=[12,31,22,17,25,18,29,14,9]；
常数w=500；
常数h=100；
常量svg2=d3。选择（“图表2”）
.append（“svg”）
.attr（“宽度”，w）
.attr（“高度”，h）；
svg2.selectAll（“rect”）
.数据（数据集2）
.输入（）
.append（“rect”）
.attr（“x”，（d，i）=>i*30）
.attr（“y”，（d，i）=>h-3*d）
.attr（“宽度”，25）
.attr（“高度”，（d，i）=>3*d）
.attr（“填充”、“海军”）；
svg2.选择全部（“文本”）
.数据（数据集）
.输入（）
//将代码添加到此行下方
.append（“文本”）
.attr（“x”，（d，i）=>i*30）
.attr（“y”，（d，i）=>{return（h-（d*3）-3）；}）
.text（函数（d）{return d；}）；
//将代码添加到此行上方
对于第二个条形图，您选择了错误的图表分区

改变这个

d3.选择（“图表1”）

到

d3.选择（“图表2”）

您应该准备好了。

对于第二个条形图，您选择了错误的图表分区

改变这个

d3.选择（“图表1”）

到

d3.选择（“图表2”）

而且你应该准备好出发。

很多事情

改变

const svg2 = d3.select("#chart1")
              .append("svg")
              .attr("width", w)
              .attr("height", h);
要说
d3，请选择（“#图表2”）
ect

第二，您定义了两次
w
和
h
，这会导致错误，因为您使用了
const

三号

selectAll("text")
    .data(dataset)
应使用
dataset1
和
dataset2

我要说的是，这些错误（大部分）可以通过查看控制台中的错误来确定

改变

const svg2 = d3.select("#chart1")
              .append("svg")
              .attr("width", w)
              .attr("height", h);
要说
d3，请选择（“#图表2”）
ect

第二，您定义了两次
w
和
h
，这会导致错误，因为您使用了
const

三号

selectAll("text")
    .data(dataset)
应使用
dataset1
和
dataset2

我要说的是，这些错误（大部分）可以通过查看控制台中的错误来确定

谢谢！这是解决方案的一部分哈哈。我现在拿到了，谢谢！这是解决方案的一部分哈哈。我现在明白了。请不要在问题标题中添加“已解决”；请不要在问题标题中加上“已解决”，而是在下面的答案中注明“正确”；如果你不愚蠢，这些事情可能发生在每个人身上。如果你不愚蠢，这些事情可能发生在每个人身上