我正在尝试添加此示例代码(纯 js 表):
http://jsfiddle.net/christopheviau/v6VMf/
到上面有其他 d3.js 元素的现有 html 页面。我似乎无法正确修改表格代码以选择正确的 div 并让表格出现。
我现有的 css 和 html 看起来像:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!-- D3.js -->
<script src="https://d3js.org/d3.v5.min.js"></script>
<!-- Google Font -->
<link href='//fonts.googleapis.com/css?family=Open+Sans:300,400' rel='stylesheet' type='text/css'>
<style>
body {
font-size: 10px;
font-family: 'Open Sans', sans-serif;
font-weight: 400;
fill: #8C8C8C;
text-align: center;
}
#wrapper {
margin-left:auto;
margin-right:auto;
width:1000px;
}
.title {
font-size: 28px;
fill: #4F4F4F;
font-weight: 300;
text-anchor: start;
left: 18px;
position: relative;
}
.subtitle {
font-size: 14px;
fill: #AAAAAA;
font-weight: 300;
text-anchor: start;
left: 18px;
position: relative;
}
.progress, .label {
margin: 20px;
width: 200px;
height: 100px;
position: relative;
float: left;
padding: 5px;
}
.radial-progress {
&__text {
font-family: Arial, sans-serif;
font-size: 2rem;
font-weight: bold;
}
}
.clear { clear: both }
.label {
font-size: 18px;
text-align: center;
margin: 0 19px;
height: 0px;
}
.sideHeader {
height: 20px;
width: 140px;
float: left;
}
.sideLabel1 {
font-size: 18px;
float: left;
align-items: center;
display: inline-flex;
height: 200px;
width: 135px;
margin: 0px 20;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="provider_longname" class="title"></div>
<div id="current_as_of" class="subtitle"></div>
<div id="contribution" class="subtitle"></div>
<div id="data_transfer" class="subtitle"></div>
<div id="madis_category" class="subtitle"></div>
<div class="sideHeader"></div>
<div class="label">Last 24 hours</div>
<div class="label">Last 7 days</div>
<div class="label">Last 30 days</div>
<div class="clear"></div>
<div class="sideLabel1">Station Reports:</div>
<div
data-track-width="15"
data-track-colour="555555"
data-fill-colour="228B22"
data-text-colour="383838"
data-stroke-colour="FFFFFF"
data-stroke-spacing="1"
id="radial1"
class="progress">
</div>
<div
data-track-width="15"
data-track-colour="555555"
data-fill-colour="228B22"
data-text-colour="383838"
data-stroke-colour="FFFFFF"
data-stroke-spacing="1"
id="radial2"
class="progress">
</div>
<div
data-track-width="15"
data-track-colour="555555"
data-fill-colour="228B22"
data-text-colour="383838"
data-stroke-colour="FFFFFF"
data-stroke-spacing="1"
id="radial3"
class="progress">
</div>
</div>
否则，我的 html 包含一个脚本标记，其中包含用于数据变量和 d3.js 元素的附加代码。我需要对 jsfiddle 代码进行哪些修改才能将此表附加到我现有的 html 页面？
最佳答案
将根节点更改为文档中的子节点:
d3.select('body')
.datum(dataset)
.call(table);
到:
d3.select('#elementId')
.datum(dataset)
.call(table);
<div id="elementId"></div>
关于javascript - 将 d3.js 表添加到现有的 html，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57329638/