filterall () y dc.redrawall () no funciona en dc.piechart -- javascript campo con d3.js campo con dc.js campo con crossfilter camp Relacionados El problema

filterAll() and dc.redrawAll() not working on dc.pieChart


1
vote

problema

Español

Todavía estoy tratando de trabajar con DC y CrossFilter para enlazar cuadros juntos, aquí estoy vinculando una tabla y un gráfico circular juntos. La vinculación está trabajando entre la tabla y la tabla de tal manera que cuando haga clic en una rebanada de pastel, la tabla se actualiza en consecuencia.

Sin embargo, esta línea no parece hacer nada, cuando hago clic en el hipervínculo. El Piechart aún muestra la misma cuña resaltada, por lo que el filtro no se borra en realidad. Uso de DC.JS Versión 2.0.1, versión CrossFilter versión 1.3.14, D3.js versión 3.5.17.

  <a class="reset" style="display:none" href="javascript:pieChart.filterAll(); dc.redrawAll();">reset</a>   

Aquí está el resto del código:

  <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();   })   
Original en ingles

I'm still trying to work with dc and crossfilter to link charts together, here I am linking a table and a pie chart together. The linking is working between the chart and table such that when I click on a pie slice the table updates accordingly.

However this line does not seem to do anything, when I click on the hyperlink. The piechart still shows the same highlighted wedge so the filter is not actually cleared. Using dc.js version 2.0.1, crossfilter version 1.3.14, d3.js version 3.5.17.

<a class="reset" style="display:none" href="javascript:pieChart.filterAll(); dc.redrawAll();">reset</a> 

Here is the rest of the code:

<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();   }) 
           

Lista de respuestas

1
 
vote
vote
La mejor respuesta
 

pieChart es local para el cierre, no es un objeto global. En lugar de var pieChart = ... , asigne la tabla al objeto Global Window usando window.pieChart = ... .

Este es el tipo de cosas que están cubiertas en un libro básico de JavaScript. Recomendaría recoger uno. Lo primero que se debe saber al comenzar a aprender a las bibliotecas de JavaScript como DC.js y CrossFilter es el idioma en sí.

 

pieChart is local to the closure, not a global object. Instead of var pieChart = ..., assign the chart to the global window object using window.pieChart = ....

This is the kind of thing that is covered in a basic Javascript book. I'd recommend picking one up. The first thing to know when starting to learn Javascript libraries like dc.js and Crossfilter is the language itself.

 
 
   
   
1
 
vote

Me enfrenté el mismo problema antes. Después de un tiempo, me doy cuenta de que las variables de la tabla se definen dentro de la devolución de llamada D3. Así que si define las variables de su tabla antes de d3.tsv o d3.csv, funcionará como a continuación:

  <script type="text/ecmascript" async="async">     var pieChart; //Define all your chart Variables here     d3.csv("Data/MyData.csv", function (errormsg, Data) {   
 

I was facing the same issue before. After a while I realize the Chart variables are defined inside the D3 callback. So if you define your chart variables before D3.tsv or D3.csv it will work like below:

<script type="text/ecmascript" async="async">     var pieChart; //Define all your chart Variables here     d3.csv("Data/MyData.csv", function (errormsg, Data) { 
 
 

Relacionados problema

1  Cómo dibujar un gráfico de Pareto en DC.JS  ( How to draw a pareto chart in dc js ) 
Estoy tratando de implementar la tabla Pareto usando el gráfico compuesto de DC.J. Orden compuesto funciona bien si los datos que entran son lineales en lugar...

1  Agregar información sobre herramientas a la tabla de barras generada con la ruta SVG  ( Adding tooltip to bar chart generated using svg path ) 
¿Cómo puedo agregar una información sobre herramientas a cada barra en un barchart generado con la ruta SVG ... es posible usar el tIP de herramientas de boot...

1  Filtrar la dimensión de la cruz por fecha  ( Filter crossfilter dimension by date ) 
¿Cómo se filtra un rango de fechas utilizando CrossFilter? El siguiente no funciona cuando sé por un hecho, existen registros entre ese período de tiempo. ...

7  DC.JS aplicando el gráfico de rango a múltiples gráficos  ( Dc js applying range chart to multiple graphs ) 
He estado trabajando con DC.JS durante las últimas semanas, pero hay un problema que no puedo no puedo averiguar. Quiero poder cambiar la báscula de cuatro ...

2  ¿Cómo filtrar el registro por valor personalizado de cualquier dimensión en DC.JS?  ( How to filter record by custom value from any dimension in dc js ) 
Cómo eliminar los registros personalizados de cualquier dimensión. En el caso siguiente, ¿cómo filtrar solo la categoría 's' y permitir el resto de ellos en d...

1  ¿Cómo puedo aplicar una orden personalizada (definida) a las filas de una tabla de fila en DC.JS?  ( How can i apply a custom defined order to the rows of a row chart in dc js ) 
Tengo un Bowchart que actualmente se ve así: BookFormComponent5 En el que la dimensión selectedTypes16 está compuesta por 11 o más valores de cadena ú...

1  DC.js CrossFilter no funciona cuando separe los gráficos DC.JS en varios archivos .js  ( Dc js crossfilter not working when i separate the dc js graphs into multiple js ) 
En primer lugar, agradezco a todos los que me ayudaron y me guiaron en DC.JS, ya que soy bastante nuevo para codificar cosas. Afortunadamente, he creado múlti...

3  Tabla de línea de eje dual y en DC.JS  ( Dual y axis line chart in dc js ) 
Tengo una tabla compuesta de tres gráficos de línea. Uno de los gráficos está utilizando un grupo "falso", como se sugiere aquí. Como puede ver en la instan...

1  CrossFilter (D3JS / DCJS) Obtenga el tamaño del grupo en grupo  ( Crossfilter d3js dcjs get group size in group ) 
Este es un seguimiento sobre la pregunta de dividir y agrupar registros en conjuntos diarios usando d3.js y dc.js . Tengo una estructura de conjunto de dat...

2  ¿Cómo redondear los valores de Reducesum en crossfiltro?  ( How to round values of reducesum in crossfilter ) 
Estoy haciendo un mapa con DC.JS y la función CrossFilter reduceSum() presenta algunos errores de redondeo. Ejemplo simplificado: group = dimension.gro...




© 2022 respuesta.top Reservados todos los derechos. Centro de preguntas y respuestas reservados todos los derechos