CODEWITHSUNDEEP
javascriptjquerysvgd3.js
Anders Kitson
Anders Kitson

Reputation: 1545

Change the height of rect element drawn by d3.js with a jQuery ui slider

I have two SVG elements added to the body, the first SVG has a g element with two rects inside and the the second SVG has a g element with one rect inside. I have a boxdim variable that sets there height and width. I want to use a jQuery UI slider to change the boxdim variable on slide which adjusts there sizes. The problem I have is I don't know how to get the value of the slider outside of the slide function and into the boxdim variable.

Here is my d3.js code, currently its in a jQuery load function however past that I don't know how to get the slide function and values into the boxdim variable without it being unavailable to the rest of the d3 code.

UPDATE

I have added the following code inside the jquery wrapper, you can see it at jsfiddle, I am still having the same issue. I want to trigger the svg elements height to be adjusted when the slider is change.

$( "#slider" ).slider({
        min: 1,
        max: 100,
        value: 10,
        slide: function( event, ui ) {
             var boxDim = $( "#slider" ).slider( "value" );
         console.log(boxDim)

        }
    });

jsfiddle

jQuery(document).ready(function($) {

  $("#slider").slider({
    max: 100
  });
  $("#slider").slider({
    min: 0
  });

  //Define data
  var data = [];

  //Define Margin
  var margin = { top: 10, right: 10, bottom: 10, left: 50 };
  //Define Box Dimensions
  var boxDim = 100;
  var boxMargin = 0;
  var span = boxDim + boxMargin;
  var colorScale = d3.scale.linear().domain([0, 2]).range(["#ccc", "#0f0"]);
  var colorScale1 = d3.scale.linear().domain([0, 2]).range(["#85e624", "#ff0000"]);

  var redraw = function(){
  //Add svg element to body
  var svg = d3.select("body").append("svg");

  //Select g element
  var nestedG = svg.selectAll("g").data(data, function(d) { return d.key; });
  var nestedG1 = svg.selectAll("g").data(data, function(d) { return d.key; });

  // Adding a g element to wrap the svg elements of each row
  var seriesEnter = nestedG.enter().append("g");
  var seriesEnter1 = nestedG1.enter().append("g");

  seriesEnter
    .attr("transform", function(d, i){
        return "translate(" + margin.left + "," + (margin.top + (span*i)) + ")";
    })
    .attr("opacity", 0).transition().duration(500).attr("opacity", 1);

  seriesEnter1
      .attr("transform", function(d, i){
          return "translate(" + margin.left + "," + (margin.top + (span*i)) + ")";
      })
      .attr("opacity", 0).transition().duration(500).attr("opacity", 1);

  // nested selection for the rects associated with each row
  var seriesEnterRect = seriesEnter.selectAll("rect").data(function(d){ return d.values; });
  var seriesEnterRect1 = seriesEnter1.selectAll("rect").data(function(d){ return d.values; });

  // rect enter. don't need to worry about updates/exit when a row is added
    seriesEnterRect.enter().append("rect")
    .attr("fill", function(d){ return colorScale(d)})
        .attr("x", function(d, i){ return i*span + boxMargin; })
        .attr("y", boxMargin)
        .attr("height", boxDim)
    .attr("width", boxDim);

  var selection = 100;

  seriesEnterRect1.enter().append("rect")
    .attr("fill", function(d){ return colorScale1(d)})
    .attr("x", function(d, i){ return i*span + boxMargin; })
    .attr("y", boxMargin + boxDim)
    .attr("height", boxDim)
    .attr("width", boxDim);

  };//redraw function ends

  var redraw1 = function(){
    //Add svg element to body
    var svg1 = d3.select("body").append("svg");

    //Select g element
    var nestedG1 = svg1.selectAll("g").data(data, function(d) { return d.key; });

    // Adding a g element to wrap the svg elements of each row
    var seriesEnter1 = nestedG1.enter().append("g");

    seriesEnter1
        .attr("transform", function(d, i){
            return "translate(" + margin.left + "," + (margin.top + (span*i)) + ")";
        })
        .attr("opacity", 0).transition().duration(500).attr("opacity", 1);

    // nested selection for the rects associated with each row
    var seriesEnterRect1 = seriesEnter1.selectAll("rect").data(function(d){ return d.values; });

    // rect enter. don't need to worry about updates/exit when a row is added
      seriesEnterRect1.enter().append("rect")
      .attr("fill", function(d){ return colorScale(d)})
          .attr("x", function(d, i){ return i*span + boxMargin; })
          .attr("y", boxMargin)
          .attr("height", boxDim)
      .attr("width", boxDim);

    }; //redraw1 function ends

  //update svg
  var update = function(){
    var newData = [];
    newData.push({ key: "series" + 1, values: [1] });
    data = newData;
    redraw();
  };

  update();

  //update1 svg
  var update1 = function(){
    var newData = [];
    newData.push({ key: "series" + 1, values: [1] });
    data = newData;
    redraw1();
  };

  update1();

}); //jQuery Ends

Upvotes: 1

Views: 2173

Answers (1)

Anders Kitson
Anders Kitson

Reputation: 1545

I figured out what I needed to do, I put the selectAll.series.enter in a variable and that referenced in it the jquery slide function.

Working Here jsfiddle

jQuery(document).ready(function($) {





  //Define data
  var data = [];

  //Define Margin
  var margin = { top: 10, right: 10, bottom: 10, left: 50 };
  //Define Box Dimensions
  var boxDim = 100;
  var boxMargin = 0;
  var span = boxDim + boxMargin;
  //var colorScale = d3.scale.linear().domain([0, 2]).range(["#ccc", "#0f0"]);
  //var colorScale1 = d3.scale.linear().domain([0, 2]).range(["#85e624", "#ff0000"]);

  var redraw = function(){
  //Add svg element to body
  var svg = d3.select("body").append("svg");

  //Select g element
  var nestedG = svg.selectAll("g").data(data, function(d) { return d.key; });
  var nestedG1 = svg.selectAll("g").data(data, function(d) { return d.key; });
       var nestedG1 = svg.selectAll("rect").data(data, function(d) { return d.key; }).attr("height",400);



  // Adding a g element to wrap the svg elements of each row
  var seriesEnter = nestedG.enter().append("g");
  var seriesEnter1 = nestedG1.enter().append("g");

  seriesEnter
    .attr("transform", function(d, i){
        return "translate(" + margin.left + "," + (margin.top + (span*i)) + ")";
    })
    .attr("opacity", 0).transition().duration(500).attr("opacity", 1);

  seriesEnter1
      .attr("transform", function(d, i){
          return "translate(" + margin.left + "," + (margin.top + (span*i)) + ")";
      })
      .attr("opacity", 0).transition().duration(500).attr("opacity", 1);

  // nested selection for the rects associated with each row
  var seriesEnterRect = seriesEnter.selectAll("rect").data(function(d){ return d.values; });
  var seriesEnterRect1 = seriesEnter1.selectAll("rect").data(function(d){ return d.values; });

       var test = seriesEnterRect.enter().append("rect")
       .attr("fill", "#34324D")
        .attr("x", function(d, i){ return i*span + boxMargin; })
        .attr("y", 100)
        .attr("height", boxDim)
    .attr("width", 100);

      var test1 = seriesEnterRect1.enter().append("rect")
       .attr("fill", "#34464D")
        .attr("x", function(d, i){ return i*span + boxMargin; })
        .attr("y", 0)
        .attr("height", boxDim)
    .attr("width", 100);

     $( "#slider" ).slider({
        min: 0,
        max: 100,
        value: 0,
        slide: function( event, ui ) {
             var boxDim = $( "#slider" ).slider( "value" );

  // rect enter. don't need to worry about updates/exit when a row is added
    test.transition().duration(750)
    .attr("fill", "#34324D")
        .attr("x", function(d, i){ return i*span + boxMargin; })
        .attr("y", boxDim)
        .attr("height", boxDim)
    .attr("width", 100);




  test1.transition().duration(750)
    .attr("fill","#34464D")
    .attr("x", function(d, i){ return i*span + boxMargin; })
    .attr("y", 0)
    .attr("height", boxDim)
    .attr("width", 100);

        }
    });

  };//redraw function ends

  var redraw1 = function(){
    //Add svg element to body
    var svg1 = d3.select("body").append("svg");

    //Select g element
    var nestedG1 = svg1.selectAll("g").data(data, function(d) { return d.key; });

    // Adding a g element to wrap the svg elements of each row
    var seriesEnter1 = nestedG1.enter().append("g");

    seriesEnter1
        .attr("transform", function(d, i){
            return "translate(" + margin.left + "," + (margin.top + (span*i)) + ")";
        })
        .attr("opacity", 0).transition().duration(500).attr("opacity", 1);

    // nested selection for the rects associated with each row
    var seriesEnterRect1 = seriesEnter1.selectAll("rect").data(function(d){ return d.values; });

    // rect enter. don't need to worry about updates/exit when a row is added
      seriesEnterRect1.enter().append("rect").transition().duration(750)
      .attr("fill", "#000")
          .attr("x", function(d, i){ return i*span + boxMargin; })
          .attr("y", boxMargin)
          .attr("height", boxDim)
      .attr("width", boxDim);

    }; //redraw1 function ends

  //update svg
  var update = function(){
    var newData = [];
    newData.push({ key: "series" + 1, values: [1] });
    data = newData;
    redraw();
  };

  update();

  //update1 svg
  var update1 = function(){
    var newData = [];
    newData.push({ key: "series" + 1, values: [1] });
    data = newData;
    redraw1();
  };

  update1();



}); //jQuery Ends

Upvotes: 1

Related Questions