HTM / CSS干扰D3.js
[英]HTM/CSS interfering with D3.js
问题描述
I have put together a d3 visualisation on codepen where it runs as planned: 
我在codepen上按计划运行了d3可视化文件：
https://codepen.io/MrVincentRyan/pen/oJLNrV?editors=1010 https://codepen.io/MrVincentRyan/pen/oJLNrV?editors=1010
However when I add additional styling with HTML and CSS the line element no longer appears: 但是，当我使用HTML和CSS添加其他样式时，不再显示line元素：
https://codepen.io/MrVincentRyan/pen/VqKLbm?editors=1010 https://codepen.io/MrVincentRyan/pen/VqKLbm?editors=1010
HTML: 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>
1 个解决方案
解决方案1
1 已采纳 2018-12-18 18:17:45
Do you see an issue with this line of HTML code? 您看到这行HTML代码有问题吗？
<button id="buttons" onclick="playAudio()" id="start">Start</button>
Multiple IDs? 多个ID？ Change it to either a class or a data-attribute or anything else other than a second ID and it'll work. 将其更改为类或数据属性或除第二个ID以外的任何其他内容，它将起作用。
A fork: https://codepen.io/anon/pen/yGameg 叉子： https : //codepen.io/anon/pen/yGameg
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.