使用jQuery ui滑块更改d3.js绘制的rect元素的高度

Question

我有两个SVG元素添加到正文中，第一个SVG有一个g元素，里面有两个rects，第二个SVG有一个g元素，里面有一个rect。我有一个boxdim变量，用于设置高度和宽度。我想使用jQuery UI滑块来更改幻灯片上的boxdim变量，以调整大小。我遇到的问题是我不知道如何将滑块的值移到滑动函数之外并进入boxdim变量。

这是我的d3.js代码，目前它在jQuery加载函数中，但是过去我不知道如何将幻灯片函数和值放入boxdim变量中，而其余部分不可用d3代码。

更新

我在jquery包装器中添加了以下代码，您可以在jsfiddle看到它，我仍然遇到同样的问题。我想触发滑块更改时要调整的svg元素高度。

$( "#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

Answer 1

我想出了我需要做什么，我把selectAll.series.enter放在一个变量中，并在其中引用了jquery slide函数。

在这里工作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