Question

我在codepen上按计划运行了d3可视化文件：

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

但是，当我使用HTML和CSS添加其他样式时，不再显示line元素：

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>

Answer 1

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

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

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

叉子：https://codepen.io/anon/pen/yGameg

HTM / CSS干扰D3.js

1 个答案: