D3js einzelne bar-graph-updates per Schieberegler

Ich bin versucht, erstellen Sie ein einfaches Balkendiagramm, das aktualisiert, wenn Sie änderungen an einem Schieberegler, ich habe ein paar Fragen. Ich weiß nicht, wie ein update-Attribut des svg-Elements beim ändern der Schieberegler ohne Zeichnung ein ganz neues svg-element erstellen Sie also zwei, drei vier Elemente.....

können Sie es sehen können an jsfiddle

Hier ist mein code 

$( "#slider" ).slider({ max: 50 });

$( "#slider" ).slider({ min: 10 });



$( "#slider" ).slider({
  change: function( event, ui ) {
   var selection = $( "#slider" ).slider( "value" );
    console.log(selection);



                //Width and height
            var w = 500;
            var h = 50;

            //Data
            var dataset = [];

      dataset.push(selection);

      console.log(dataset);

            //Create SVG element
            var svg = d3.select("body")
                        .append("svg")
                        .attr("width", 500)
                        .attr("height", 50);

            var rectangle = svg.selectAll("rect")
            .data(dataset)
            .enter()
            .append("rect");





            rectangle.attr("width", 20)

            .attr("height", function(d){
                return d;
            })
            .attr("x", function(d){
                return 20;
            })
            .attr("y", function(d){
                return 20;
            });


  }
});
  • Hallo, ich habe eine kleine, aber bedeutende änderung in der Geige, die ich denke, Sie könnte wie: hören Sie auf die Folie, Ereignis eher als die änderung, die man macht, die Reaktion auf die Gleitbewegung ununterbrochene (und meiner Meinung nach angenehmer). Ich fügte hinzu, dass die post. Überprüfen Sie es heraus.
InformationsquelleAutor Anders Kitson | 2014-04-15
  1. 3

    Nur ein paar änderungen waren notwendig.

    Ändern, um die Handhabung der Eingabe/Auswahl aktualisieren:

    var rectangle = svg.selectAll("rect")
    .data(dataset);

rectangle
    .enter()
    .append("rect");

rectangle
    .attr("width", 20)
    ...

    Ändern, um die Platzierung der SVG-element außerhalb des slider-handler.

    Komplette FIDDLE.

    HINWEIS: die aktuelle Höhe des SVG-element ist nicht ausreichend, um zu sehen, das Ausmaß der änderungen erlaubt, indem Sie den Schieberegler. Sie sollten erhöhen, die, sagen attr("height", 200).

    Anderen FIDDLE reagiert die Folie auf, die Veranstaltung und damit die änderung des REK ist die Höhe, die mehr angenehm für das Auge.

    • Wie mache ich das Rechteck wachsen up statt nach unten? Danke!
    • Dachte, es heraus, wenn jemand Sie braucht: .attr("transform", function(d, i){ return "translate(20, 500) rotate(180)"; }) Dadurch wird das Rechteck in der unteren linken Ecke ein 500x500px svg-container, die 20 ist die Breite des Rechtecks.
    InformationsquelleAutor FernOfTheAndes
Schreibe einen Kommentar