我仍然在尝试使用dc和crossfilter将图表链接在一起,这里我将一个表格和一个饼图链接在一起。图表和表格之间的链接是有效的,这样当我单击饼图切片时,表格就会相应地更新。
但是,当我单击超链接时,此行似乎没有任何作用。拼图仍然显示相同的高亮显示的楔形,因此过滤器实际上不会被清除。使用dc.js版本2.0.1、交叉过滤器版本1.3.14、d3.js版本3.5.17。
<a class="reset" style="display:none" href="javascript:pieChart.filterAll(); dc.redrawAll();">reset</a>
下面是代码的其余部分:
<div class="row">
<div class="column-media">
<h2>Media</h2>
<table id="media-table"></table>
</div>
<div class="column-book" id="book-chart">
<h2>Books</h2>
<a class="reset" style="display:none" href="javascript:pieChart.filterAll(); dc.redrawAll();">reset</a>
</div>
</div>
<script type="text/javascript" src="lib/d3.js"></script>
<script type="text/javascript" src="lib/crossfilter.js"></script>
<script type="text/javascript" src="lib/dc.js"></script>
<script type="text/javascript">
d3.tsv("DH_Doigv2.tsv", function(error, data) {
data.forEach(function (d) {
d.id = +d.Item;
d.Item = d.id;
})
var facts = crossfilter(data);
//table
var itemDimension = facts.dimension(function(d) { return d.Item; });
//book chart
var bookDimension = facts.dimension(function(d) { return d.Title; })
var bookGroup = bookDimension.group();
var dataTable = dc.dataTable("#media-table")
.width(425)
.height(800)
.dimension(itemDimension)
//.showGroups(false)
.group(function (d) { return d; })
.columns([
function(d) { return '<a target="_blank" href="https://arc.lib.montana.edu/ivan-doig/item.php?id=' + d.Item+ '"><img src="https://arc.lib.montana.edu/ivan-doig/' + d.Thumb + '" /></a><div class="byline">' + d.Title + '</div><div class="quote">' + d.Quote + '</div><div class="sound">' + '<audio controls title="Audio courtesy of the Acoustic Atlas at MSU Library:" ' + d.Sound + ' "><source src=" '+ "http://acousticatlas.org/objects/aa0002377.mp3" + '" type="audio/mpeg">Your browser does not support the audio element.</audio>' + '</div>'; },
]);
var pieChart = dc.pieChart("#book-chart")
.height(550)
.width(500)
.dimension(bookDimension)
.group(bookGroup);
dc.renderAll();
})
发布于 2017-03-11 07:59:53
pieChart
是闭包的局部对象,而不是全局对象。使用window.pieChart = ...
将图表分配给全局窗口对象,而不是var pieChart = ...
。
这是一本基本的Javascript书中涉及的内容。我建议你买一个。当开始学习像dc.js和Crossfilter这样的Javascript库时,首先要知道的是语言本身。
发布于 2018-11-09 03:44:30
我之前也遇到过同样的问题。过了一段时间,我意识到图表变量是在D3回调函数中定义的。因此,如果您在D3.tsv或D3.csv之前定义图表变量,它的工作方式如下所示:
<script type="text/ecmascript" async="async">
var pieChart; //Define all your chart Variables here
d3.csv("Data/MyData.csv", function (errormsg, Data) {
https://stackoverflow.com/questions/42729366
复制相似问题