讓D3.js使用容器顯示
[英]getting D3.js to display using container
問題描述
我有一個新手d3.js的問題。 我嘗試輸入很多教程輸入，但我似乎永遠無法讓顯示輸出正常工作。 這是一個例子。 我有一個d3.js頁面模板示例（來自Scott Murray的D3書。）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>D3 Page Template</title>
<script type="text/javascript" src="d3/d3.v3.js"></script>
</head>
<body>
<script type="text/javascript">
// Your beautiful D3 code will go here
</script>
</body>
</html>
現在，我轉到： http ： //www.recursion.org/d3-for-mere-mortals/並嘗試輸入D3容器中的第一個代碼示例：
var rectDemo = d3.select("#rect-demo").
append("svg:svg").
attr("width", 400).
attr("height", 300);
rectDemo.append("svg:rect").
attr("x", 100).
attr("y", 100).
attr("height", 100).
attr("width", 200);
我已經在網上搜索了關於如何在html文件中構建你的D3代碼的消息來源，但不幸的是，幾乎所有的教程都假設你知道在哪里放置相關的代碼行，以便在你打開你的時候一切正常瀏覽器。 在過去的幾周里，這個普遍的問題一直困擾着我。
當我在容器中輸入上面的內容時，我沒有輸出：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>D3 Page Template</title>
<script type="text/javascript" src="d3/d3.v3.js"></script>
</head>
<body>
<script type="text/javascript">
// Your beautiful D3 code will go here
// http://www.recursion.org/d3-for-mere-mortals/
var rectDemo = d3.select("#rect-demo").
append("svg:svg").
attr("width", 400).
attr("height", 300);
rectDemo.append("svg:rect").
attr("x", 100).
attr("y", 100).
attr("height", 100).
attr("width", 200);
</script>
</body>
</html>
有人可以簡要解釋為什么這是，以及我要做什么，讓這個例子顯示？ 非常感謝！ 我一整天都在努力試圖讓我的例子顯示出來並進行微小的修改，制作復制和粘貼的任何示例輸出，消失！
2 個解決方案
解決方案1
3 已采納 2013-10-20 19:44:13
問題實際上只是初始的“切入點”，即D3追求一切的元素。 在HTML模板中，元素的主體中沒有任何內容，但在D3代碼中，您選擇ID為“rect-demo”的元素來附加所有內容。 此元素不存在，因此沒有任何反應。
所以你有兩個選擇來做這項工作 - 要么將帶有此ID的元素添加到HTMl模板，要么告訴D3附加到body 。
選項1：
<body>
<div id="rect-demo"></div>
// etc
選項2：
var rectDemo = d3.select("body").
// etc
總的來說，使用最新版本的D3，您不需要明確指定添加元素的命名空間（除非它是不明確的）。 也就是說，代替.append("svg:rect")你可以簡單地做.append("rect") 。
解決方案2
0 2013-10-20 19:31:15
獲取.attr（“display”：none）來處理mouseout（D3.js）
[英]Getting .attr(“display”:none) to work on mouseout (D3.js)
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.