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"}

]

- krishna_v

Answer 1

您可以使用brush.extent()在代码中设置刷子的范围，因此在您的情况下，可以这样做：

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

- Lars Kotthoff

---

Lars，这个应该在brush事件中添加还是在创建brush时添加？我尝试在brush事件中添加，但结果相同。当我将其拖动穿过矩形时，高度应该自动填充吗？ - krishna_v

你应该在创建笔刷时设置这个。至于自动设置高度，你需要在笔刷事件中进行设置 -- 忽略实际的y范围并将其设置为高度。 - Lars Kotthoff