将d3.js表添加到现有的html中

Question

I am trying to add this example code (pure js table): 我正在尝试添加以下示例代码（纯js表）：

http://jsfiddle.net/christopheviau/v6VMf/ http://jsfiddle.net/christopheviau/v6VMf/

to an existing html page which has other d3.js elements above. 到具有上面其他d3.js元素的现有html页面。 I cannot seem to modify the table code properly to select the correct divs and get the table to appear. 我似乎无法正确修改表代码以选择正确的div并显示该表。

My existing css and html looks like: 我现有的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>

Otherwise, my html contains a script tag with additional code for data vars and d3.js elements. 否则，我的html包含一个脚本标签，其中包含用于数据vars和d3.js元素的其他代码。 What modifications do I need to make to the jsfiddle code to get this table to append to my existing html page? 我需要对jsfiddle代码进行哪些修改才能将该表附加到我现有的html页面上？

Answer 1

Change the root node to a child node in your document: 将根节点更改为文档中的子节点：

d3.select('body')
    .datum(dataset)
    .call(table);

to: 至：

d3.select('#elementId')
    .datum(dataset)
    .call(table);

<div id="elementId"></div>

将d3.js表添加到现有的html中

问题描述

1 个解决方案

解决方案1
0 2019-08-02 16:14:41

将d3.js表添加到现有的html中

问题描述

1 个解决方案

解决方案1 0 2019-08-02 16:14:41

解决方案1
0 2019-08-02 16:14:41