Quiero hacer algo como la lista plegable en D3.js. Digamos que tenemos datos con un formato data = [{"title": "lorem", "items": ["lorem", "ipsum", "..."], "state": "collapsed"}]

Ahora quiero prestar estos datos como un grupo de etiquetas de texto SVG cuando el estado no está "colapsado y solo representa una etiqueta de texto con el título de lo contrario.

<g class="item">
<text>Title</text>
<text>Item 1</text>
<text>Item 2</text>
</g>
<g class="item collapsed">
<text> Title2</text>
</g>

Mi problema es que cuando el usuario hace clic en un elemento de lista, debe plegarlo / desplegarse de manera adecuada, pero el dato subyacente no se cambia, por lo que no estoy en la selección de ingreso y no puedo usar agregar para generar etiquetas para los elementos. ¿Cómo podría resolverlo? ¿O tal vez debería usar jQuery para realizar la manipulación de DOM si un cambio no se asigna directamente a un DATOS?

-1
Konrad 1 jul. 2019 a las 18:17

1 respuesta

La mejor respuesta

Finalmente entendí lo que estaba mal. En mi código, después de fusionar, ingrese y actualice las selecciones, llame a la transición para mover los nodos en lugares adecuados. La transición no devuelve selection pero es propio objeto transition que tiene interfaces muy similares a selection pero carece de append y data y algunos otros métodos. Por lo tanto, la solución fue solo para envolver la transición en el método de llamada, por lo que sigo operando en la selección y ahora puedo usar data y data como de costumbre.

Así que mi código se parecía así:

const nodeUpdate = node // nodeUpdate is now a transition object!!!
    .merge(nodeEnter)
    .transition(transition)
    .attr('transform', d => `translate(${d.x},${d.y})`);

Y ahora es:

const nodeUpdate = node // nodeUpdate is a selection
    .merge(nodeEnter)
    .call(s => s.transition(transition).attr('transform', d => `translate(${d.x},${d.y})`));
0
Konrad 2 jul. 2019 a las 09:08