0
157
VistasLa eliminación del elemento con D3 falla
La eliminación de dom con D3 falla Hola a todos. Intento usar D3 para manipular doms, que se definen en html con anticipación. Contenido en html:
<div> <p class="child" id="1">James</p> <p class="child" id="2">Kate</p>código D3:
var div = d3.select('div') var pp = div.selectAll('p.child'); var ppUpdate = pp.data(dataset, d =>d.id); var ppexit = ppUpdate.exit(); ppexit.remove();Uso los siguientes datos para las pruebas: var data1 = [{ id: 1, nombre: 'James' }, { id: 4, nombre: 'Jordan' }];
Error al ejecutar "pp.data": 
Modifiqué el código relevante a:
var ppUpdate = pp.data(dataset, d => { if(d){ return d.id } }); No habrá errores. Pero "ppUpdate.exit();" no devuelve el registro que quiero eliminar, sino que devuelve ambos registros en el html. Al rastrear más el proceso de ejecución del código, en la función "bindKey" en d3.js, no se puede obtener el "keyValue" correcto. 
Por favor, ¿cómo puedo completar mi función? Gracias.
1 Respuestas
Responde la pregunta0
El primer argumento en selection.data() , que nombró d , es el dato del elemento. La información importante es que la función clave se evalúa en los elementos y en los datos; sin embargo, los elementos inicialmente no tienen datos vinculados a ellos, por lo que el dato es null .
Lo que quieres es obtener primero la id del elemento:
var ppUpdate = pp.data(dataset, (d, i, n) => d ? d.id : n[i].id); Tenga en cuenta que debido a que tenía una función de flecha en su pregunta, no puedo usar this , así que estoy usando n[i] para obtener el elemento.
Aquí está el fragmento de trabajo:
var dataset = [{ id: 1, name: 'James' }, { id: 4, name: 'Jordan' }]; var div = d3.select('div') var pp = div.selectAll('p.child'); var ppUpdate = pp.data(dataset, (d, i, n) => d ? d.id : n[i].id); var ppexit = ppUpdate.exit(); ppexit.remove(); <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script> <div> <p class="child" id="1">James</p> <p class="child" id="2">Kate</p> </div>