d3.js - 如何調整畫筆選擇的高度

Question

我想將畫筆選擇的高度默認填充到繪製它的矩形的高度。

這裏是我的代碼：

var margin = {top: 10, right: 50, bottom: 20, left: 50}, 
    width = 800 - margin.left - margin.right, 
    height = 120 - margin.top - margin.bottom; 


var svgheight=40,svggraphheight=400; 

var svg,svgcheckins,svgbuilds,svgoss,svgappsec; 


var x,j = 0; 
var x_axis = 1; 
var y_axis = 45; 
var xvar=0; 
var yvar=40; 
var rectangle,RectangleAttrb,rect,rectdata,selected,begindata,enddata; 

function loaddata() 
{ 

    svg = d3.select("#timer").append("svg").attr("id","svgtimer") 
    .attr("width", 550) 
    .attr("height", svgheight) 
    .append("g") 
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); 


    svgcheckins= d3.select("#legend").append("svg").attr("id","svgcheckins") 
    .attr("width", 250) 
    .attr("height", 200) 
    .append("g") 
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); 



    d3.json("TimerData.json", function(data) 

    { 
     CreateLegend('#timer',svg,"rectangle",data,'Mar 1','Oct 4'); 

     createbrush(); 


    }); 




} 





function createbrush() 
     { 

      var brush = d3.svg.brush() 
       .x(d3.scale.identity().domain([0, width])) 
       .y(d3.scale.identity().domain([0, height+30])) 
       //.on("brushstart", brushstart) 
      .on("brushend", brushed); 


      svg.append("g").call(brush); 

      function brushed() 
      { 
        //var e = brush.extent(); 
       var e = d3.event.target.extent(); 
       selected = svg.selectAll("rect").filter(function(d) 
       { 
        return d.x_axis <= e[1][0] && d.x_axis + d.width >= e[0][0] && d.y_axis <= e[1][1] && d.y_axis + d.height >= e[0][1]; 
        }) 
        //console.log("e[1][0] " + e[1][0] + " e[0][0] " + e[0][0] + "object " +e); 


       //createtinderboxes(selected); 

      } 

      function brushstart() 
      { 
        var e = brush.extent(0,5); 


      } 




     } 




function CreateLegend(div,svg,svgid,data,header,trail) 
{ 

     var traillength=0; 
     var svgelem; 


    jsondata = data; 

    console.log(data); 

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

         .attr("id", function (d,i) { return svgid + "id" + i ; }) 
         .attr("x", function (d) { return d.x_axis; }) 
         .attr("y", function (d) { return d.y_axis; }) 
         .attr("width",function(d) { return d.width; }) 
         .attr("height",function(d) { return d.height; }) 
         .style("stroke", function (d) { return d.border;}) 
         .style("fill", function(d) { return d.color; }); 





      var textparam = svg.selectAll("text").data(data).enter().append("text"); 

      var yearheader = d3.select("#header"); 

     if(yearheader.empty()) 
     { 

      var textheader = svg.append("text").attr("dx",20).attr("dy",5).text(header).attr("id",header).attr("style","margin-bottom:21px;border-bottom: solid 2px #ffd97f; font-size:12px;") 
     } 

      if (trail.length == 0) 
     { 

       d3.select(header).attr("style","font-size:15.1px;text-decoration:underline"); 

     } 


     var text = textparam .attr("x", function (d) { traillength = d.x_axis + d.width +10; return d.x_axis + d.width +10; }) 
         .attr("y", function (d) { return d.y_axis + d.height-5; }) 
         .attr("width",30) 
         .attr("height",20) 
         .attr("style", "text-decoration:none") 
         .text(function(d) { return d.text; }); 


    var yearheader = d3.select("#trail"); 


    if (trail.length > 0 && yearheader.empty()) 
     { 

     svg.append("text").attr("id","trail").attr("dx",traillength-10).attr("dy",5).text(trail).attr("style","margin-bottom:21px;border-bottom: solid 2px #ffd97f; font-size:12px;") 
     } 


} 

數據從JSON文件中讀取：

[ 
    { "x_axis":40, "y_axis": 10,"width":20,"height":15,"color" : "#ffffff","border":"#000000"}, 
    { "x_axis":60, "y_axis": 10,"width":20,"height":15,"color" : "#ffffff","border":"#000000"}, 
    { "x_axis":80, "y_axis":10,"width":20,"height":15,"color" : "#ffffff","border":"#000000"} 

] 

Answer 1

可以使用brush.extent()在代碼中設置畫筆的程度，所以你的情況類似

brush.extent([[40, 80], [10, 25]]);