d3.js - gastricos - problemas digestivos por estres

La salida no funciona correctamente

Question

Hola, soy bastante nuevo en D3 y tengo problemas con la función de salida

Quiero hacer una lista y barras sin usar SVG y todo funciona como un amuleto.

Selecciono el div y luego anexo e ingreso mis datos para poblar varios divs.

var content = d3.select("#graph").selectAll("div")
        .data(bandMates)
        .enter()
        .append("div")
        .classed("member",true) //Div contenedor

        content
            .append("div")
            .text(function(d) { return d.name; });

        content
            .append("div")
            .style("height", "40px")
            .style("width", "0px")
            .style("background-color", "#ff9999")
            .transition()
            .duration(1000)
            .style("width", function (d){ return d.songs + "px";});

        content
            .append("div")
            .text(function(d) { return "wrote " + d.songs + " songs!"; });

al final del proceso content.exit().remove(); el content.exit().remove(); porque quiero poder actualizar el número de canciones con otra función y luego volver a llamar a la función de dibujar ().

La consola Firebug me está arrojando este error

content.exit is not a function

¿Me estoy perdiendo de algo? Fui a los tutoriales de Bostock y todo parece estar bien.

He hecho un JSFiddle para ver mi código:

http://jsfiddle.net/9HTUM/

¡Gracias por leer!

Answer 1

Aquí hay un violín actualizado con tres cambios: http://jsfiddle.net/URpfB/

1) su selección inicialTodo el selector debe ser más específico ya que hay muchos divs descendientes en la página después de que su código se ejecute una vez. Debes distinguir entre los miembros divs más importantes y los demás haciendo selectAll(''div.member'')

2) necesita una función de clave de datos para que d3 tenga más por delante que la longitud / posición de datos para determinar cuándo se agregan nuevos datos o si se eliminan datos antiguos. En su ejemplo, esto mantendría a cada div.member asociado con un único nombre de miembro: data(bandMates, function(d){return d.name;})

3) como señaló Snoozer, debe ser más preciso al asignar selecciones a las variables. No puede salir () de las selecciones de enter ().

Answer 2

Usted ha definido el contenido como:

var content = d3.select("#graph").selectAll("div")
    .data(bandMates)
    .enter()
    .append("div")
    .classed("member",true) //Div contenedor

Entonces cuando haces content.exit() , es como tratar de hacer d3.select("#graph").selectAll("div").data(bandMates).enter()..exit()

Está llamando a la salida de una selección que ya ha ingresado. Si define contenido en su lugar como:

var content = d3.select("#graph").selectAll("div")
    .data(bandMates);

y luego haga content.enter().... en la tercera línea de código que compartió en su respuesta, este error debería desaparecer.

Enter() y exit() son funciones de una selección de datos, por lo que una vez que haya llamado a enter() no podrá llamar a exit() y que tenga sentido. exit() debe estar en los mismos datos.

Answer 3

Causa posible solo de árbol ...

Esto no está relacionado con el problema del OP, pero encontré esta pregunta SO al investigarla y agregarla para el próximo transeúnte.

En mi caso, la limpieza de un d3.layout.tree en colapso / expansión no estaba sucediendo porque me olvidaba de configurar la clase "nodo" en los nodos. Parecería que los árboles d3 requieren que se establezca el atributo de clase de nodo.

no funcionó

<g transform="translate(20,20)">
    <circle style="fill: rgb(198, 219, 239);" r="8"></circle>
    <text style="fill-opacity: 1;" dx="15" dy="4" id="txt_SELF_SERVICE" class="text">Self Service</text>
</g>

trabajó

<g transform="translate(20,20)" class="node ">
    <circle style="fill: rgb(198, 219, 239);" r="8"></circle>
    <text style="fill-opacity: 1;" dx="15" dy="4" id="txt_SELF_SERVICE" class="text">Self Service</text>
</g>