[英]Add d3.js table to existing html
我正在嘗試添加以下示例代碼(純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包含一個腳本標簽,其中包含用於數據vars和d3.js元素的其他代碼。 我需要對jsfiddle代碼進行哪些修改才能將該表附加到我現有的html頁面上?
將根節點更改為文檔中的子節點:
d3.select('body')
.datum(dataset)
.call(table);
至:
d3.select('#elementId')
.datum(dataset)
.call(table);
<div id="elementId"></div>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.