时间戳

首页 > 解决方案 > HTM/CSS 干扰 D3.js

javascript - HTM/CSS 干扰 D3.js

问题描述

我在 codepen 上整理了一个 d3 可视化，它按计划运行：

https://codepen.io/MrVincentRyan/pen/oJLNrV?editors=1010

但是，当我使用 HTML 和 CSS 添加其他样式时，线条元素不再出现：

https://codepen.io/MrVincentRyan/pen/VqKLbm?editors=1010

HTML：

<head>
  </head
<body>
  <div class="intro">
      <div class="flexwrap">
        <div class="headline">
          <div class="topline">
            <!-- <time class="date">01.03.2018</time> -->
          <h1 class="title">The sound of the pound</h1>
          <h3 class="introtext">From flash crashes, to snap elections, the pound has been rattling around currency markets as Brexit threatens to play a new tune with the UK's economy.</h3>
        </div>

  <div id="audioviz">
   <button id="buttons" onclick="playAudio()" id="start">Start</button>
	<button id="buttons" onclick="audio.stop()" id="reset">Reset</button>
    </div>
  <audio id="myAudio">
  <source src="https://res.cloudinary.com/dxeddkkwh/video/upload/v1544798173/1544797413_5gbSBNViC81pMgpVitW7.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
  </div>
        </div>
      </div>

    </div>

    <div class="annotation-list layout-small" id="surveychart-annotations">
      <div class="flexwrap">
        <div class="annotation-list__item">
          <div class="annotation-list__number">1</div>
          <div class="annotation-list__text">
          <h3>Brexit referendum June 23 2016</h3>
  <div class="annotation-list__img-box"><img class="annotation-list__img" src="https://cdn.pixabay.com/photo/2018/07/31/16/06/brexit-3575384_1280.jpg"/></div>
          <p>Following the vote for Brexit on June 23 the pound plunged <strong>from $1.43</strong> the week before the Brexit vote <strong>to $1.36</strong> as the market panicked following the result. <strong>David Cameron</strong> the Prime Minister resigned and Theresa May emerged as an unlikely leader to see Brexit through.</p>

标签： javascripthtmlcssd3.js

解决方案

您看到这行 HTML 代码有问题吗？

<button id="buttons" onclick="playAudio()" id="start">Start</button>

多个身份证？将其更改为类或数据属性或第二个 ID 以外的任何其他内容，它就会起作用。

一个分叉：https ://codepen.io/anon/pen/yGameg

推荐阅读