我正在开始学习使用d3.js可视化数据的过程,到目前为止,我发现Scott Murray的"交互式数据可视化"非常有用.我正在阅读第11章中的一些示例代码,并想知道如何将工具提示添加到饼图(本书已经使用条形图描述了此过程).无论如何,只是在过去几个小时内修补了代码,并想看看是否有人可以借此给我:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>D3: Pie layout</title>
<script type="text/javascript" src="d3/d3.v3.js"></script>
<style type="text/css">
text {
font-family: sans-serif;
font-size: 12px;
fill: white;
}
#tooltip {
position: absolute;
width: 200px;
height: auto;
padding: 10px;
background-color: white;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
-webkit-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
-mox-box-shadow: 4px 4px 4px 10px rgba(0, 0, 0, 0.4);
box-shadow: 4px 4px 10px rbga(0, 0, 0, 0.4)
pointer-events: none;
}
#tooltip.hidden {
display: none;
}
#tooltip p { …我理解到可以使用看起来像这样的HTML代码嵌入tableau视图:
<script type="text/javascript" src="http://tableau/javascripts/api/viz_v1.js">
<div id="tableau_view" class="tableauPlaceholder" style="width:1028px; height:804px;">
<object class="tableauViz" width="1028" height="804" style="display:none;">
<param name="host_url" value="http%3A%2F%2Ftableau%2F" />
<param name="site_root" value="" />
<param name="name" id="wbName" value="view_0/view_0" />
<param name="tabs" value="no" />
<param name="toolbar" value="yes" />
</object>
</div>
我想要做的是生成一个包含下拉菜单的页面,其中包含"name"参数的值.基本上,当我在下拉列表中选择一个值时,将使用与所选值关联的tableau viz刷新页面的片段.我一直在努力解决这个问题,因为我自己还在学习JavaScript.
这就是我现在所拥有的:
<html>
<head>
<meta charset="utf-8">
<title>Tableau Test</title>
<script type="text/javascript" src="http://tableau/javascripts/api/viz_v1.js">
function selectViz() {
var mylist=document.getElementById("tableau_workbook");
var wbName=document.getElementByName("name");
wbName.setAttribute("value",mylist.options[mylist.selectedIndex].value);
}
</script>
</head>
<body>
<form>
<!-- Dropdown Menu, the value corresponds with those found in the "name" parameter in the tableau view code …