로드시 d3 브러시 크기를 설정하는 방법

Question

여기 브러시 블 막대 차트를 그리려고합니다. 다음은 내가 사용한 코드 라인입니다.

var barchart = function(width,height,id,data,d3){ 

var focusGraph; 


var margin = {top: 10, right: 10, bottom: (height*.2), left: 40}, 
margin2 = {top: (height*.86), right: 10, bottom: 20, left: 40}, 
width = width - margin.left - margin.right, 
height2 = height - margin2.top - margin2.bottom, 
height = height - margin.top - margin.bottom; 

var max1 = d3.max(data, function(d) { return d.Metric1; }); 
var max2 = d3.max(data, function(d) { return d.Metric2; }); 
var maxValue = d3.max([max1, max2]); 


var x = d3.scale.ordinal() 
.rangeRoundBands([0, width], 0.1, 0.2); 
var x2 = d3.scale.ordinal() 
.rangeRoundBands([0, width], 0.1, 0.2); 

var y = d3.scale.linear() 
.range([height,0]); 


var y2 = d3.scale.linear() 
.range([height2,0]); 


var dimensions = data.map(function(d){ 
    return d.Dim1; 
}); 


var barWidth = x.rangeBand(); 

x.domain(data.map(function(d) { return d.Dim1; })); 
y.domain([0, d3.max(data.map(function(d) { return d.Metric1; }))]); 
x2.domain(x.domain()); 
y2.domain(y.domain()); 


var xAxis = d3.svg.axis().scale(x).orient("bottom"), 
xAxis2 = d3.svg.axis().scale(x2).orient("bottom"), 
yAxis = d3.svg.axis().scale(y).orient("left").tickFormat(d3.format("s")); 



var svg = d3.select("#"+id).append("svg") 
.attr("width", width + margin.left + margin.right) 
.attr("height", height + margin.top + margin.bottom) 

var brush = d3.svg.brush() 
.x(x2) 
.extent([0,50]) 
.on("brush", brushed); 

var area = d3.svg.area() 
.x(function(d) { return x(d.Dim1); }) 
.y0(height) 
.y1(function(d) { return y(d.Metric1); }); 


svg.append("defs").append("clipPath") 
.attr("id", "clip") 
.append("rect") 
.attr("width", width) 
.attr("height", height); 

var focus = svg.append("g") 
.attr("transform", "translate(" + margin.left + "," + margin.top + ")"); 

var barsGroup = focus.append("g") 
.attr('clip-path', 'url(#clip)'); 

var context = svg.append("g") 
.attr("transform", "translate(" + margin2.left + "," + margin2.top + ")"); 



var barWidth = x.rangeBand(); 

focus.append("g") 
.attr("class", "x axis") 
.attr("transform", "translate(0," + height + ")") 
.call(xAxis); 

focus.append("g") 
.attr("class", "y axis") 
.call(yAxis); 

focusGraph = barsGroup.selectAll("rect") 
.data(data) 
.enter().append("rect") 
.attr("x", function(d, i) { return x(d.Dim1); }) 
.attr("y", function(d) { return y(d.Metric1); }) 
.attr("width", barWidth) 
.attr("height", function(d) { return height-y(d.Metric1); }); 


context.selectAll("rect") 
.data(data) 
.enter().append("rect") 
.attr("x", function(d, i) { return x2(d.Dim1); }) 
.attr("y", function(d) { return y2(d.Metric1); }) 
.attr("width", barWidth) 
.attr("height", function(d) { return height2-y2(d.Metric1); }); 

// context.append("g") 
// .attr("class", "x axis") 
// .attr("transform", "translate(0," + height2 + ")") 
// .call(xAxis2); 

context.append("g") 
.attr("class", "x brush") 
.call(brush) 
.selectAll("rect") 
.attr("y", -6) 
.attr("height", height2); 

var test = 0; 

function brushed() { 


var selected = x2.domain().filter(function(d){return (brush.extent()[0] <= x2(d)) && (x2(d) <= brush.extent()[1])}); 
x.domain(selected); 
var b =0; 
var w =0; 
if(selected.length < 2){ 
    b=barWidth; 
    w=b*2; 
} 
else{ 
    b = x(selected[1])-x(selected[0]); 
    var w = b/2; 
} 


var j = 0; 





focusGraph.attr("width", w); 
focusGraph.attr("id",function(d, i) { return d.Index;}); 
focusGraph.attr("height", function(d,i) { 
for(j=0;j<selected.length;j++) 
    { 
     if(d.Dim1 == selected[j]){ 
      console.log(d.Dim1 +"=="+selected[j]) 
       return d.Metric1; 
     } 
    } 
}); 
console.log(j); 
focusGraph.attr("x", function(d,i) { 
    for(j=0;j<selected.length;j++) 
    { 
     if(d.Dim1 == selected[j]){ 
      console.log(d.Dim1 +"=="+selected[j]) 
       return (x(selected[j]))+(barWidth/2); 
     } 
    } 
}); 
focus.select(".x.axis").call(xAxis); 

svg.append("g") 



} 

}; 

출력 : 여기

내가 고정 브러시 정도로 막대 그래프를 표시 할. 아래 그림과 같이

I가 brush.extent 기본적 범위 값을 적용하는 시도 ([0,50])는 그 범위의 폭을 설정할 수 있지만, 기본적으로 막대 그래프를 클립하지 . brush.on ("start", brushstart)을 사용해 보았습니다. 하지만 그게 작동하지 않습니다 어떤 도움을 주셔서 감사합니다.

Answer 1

나는 성공적 만 ** 코드를 실행 코드 brush.call (brush.event)

var barchart = function(width,height,id,data,d3){ 
 

 
var focusGraph; 
 

 

 
var margin = {top: 10, right: 10, bottom: (height*.2), left: 40}, 
 
margin2 = {top: (height*.86), right: 10, bottom: 20, left: 40}, 
 
width = width - margin.left - margin.right, 
 
height2 = height - margin2.top - margin2.bottom, 
 
height = height - margin.top - margin.bottom; 
 

 
var max1 = d3.max(data, function(d) { return d.Metric1; }); 
 
var max2 = d3.max(data, function(d) { return d.Metric2; }); 
 
var maxValue = d3.max([max1, max2]); 
 

 

 
var x = d3.scale.ordinal() 
 
.rangeRoundBands([0, width], 0.1, 0.2); 
 
var x2 = d3.scale.ordinal() 
 
.rangeRoundBands([0, width], 0.1, 0.2); 
 

 
var y = d3.scale.linear() 
 
.range([height,0]); 
 

 

 
var y2 = d3.scale.linear() 
 
.range([height2,0]); 
 

 

 
var dimensions = data.map(function(d){ 
 
    return d.Dim1; 
 
}); 
 

 

 
var barWidth = x.rangeBand(); 
 

 
x.domain(data.map(function(d) { return d.Dim1; })); 
 
y.domain([0, d3.max(data.map(function(d) { return d.Metric1; }))]); 
 
x2.domain(x.domain()); 
 
y2.domain(y.domain()); 
 

 

 
var xAxis = d3.svg.axis().scale(x).orient("bottom"), 
 
xAxis2 = d3.svg.axis().scale(x2).orient("bottom"), 
 
yAxis = d3.svg.axis().scale(y).orient("left").tickFormat(d3.format("s")); 
 

 

 

 
var svg = d3.select("#"+id).append("svg") 
 
.attr("width", width + margin.left + margin.right) 
 
.attr("height", height + margin.top + margin.bottom) 
 

 
var brush = d3.svg.brush() 
 
.x(x2) 
 
.extent([0,50]) 
 
.on("brush", brushed); 
 

 
var area = d3.svg.area() 
 
.x(function(d) { return x(d.Dim1); }) 
 
.y0(height) 
 
.y1(function(d) { return y(d.Metric1); }); 
 

 

 
svg.append("defs").append("clipPath") 
 
.attr("id", "clip") 
 
.append("rect") 
 
.attr("width", width) 
 
.attr("height", height); 
 

 
var focus = svg.append("g") 
 
.attr("transform", "translate(" + margin.left + "," + margin.top + ")"); 
 

 
var barsGroup = focus.append("g") 
 
.attr('clip-path', 'url(#clip)'); 
 

 
var context = svg.append("g") 
 
.attr("transform", "translate(" + margin2.left + "," + margin2.top + ")"); 
 

 

 

 
var barWidth = x.rangeBand(); 
 

 
focus.append("g") 
 
.attr("class", "x axis") 
 
.attr("transform", "translate(0," + height + ")") 
 
.call(xAxis); 
 

 
focus.append("g") 
 
.attr("class", "y axis") 
 
.call(yAxis); 
 

 
focusGraph = barsGroup.selectAll("rect") 
 
.data(data) 
 
.enter().append("rect") 
 
.attr("x", function(d, i) { return x(d.Dim1); }) 
 
.attr("y", function(d) { return y(d.Metric1); }) 
 
.attr("width", barWidth) 
 
.attr("height", function(d) { return height-y(d.Metric1); }); 
 

 

 
context.selectAll("rect") 
 
.data(data) 
 
.enter().append("rect") 
 
.attr("x", function(d, i) { return x2(d.Dim1); }) 
 
.attr("y", function(d) { return y2(d.Metric1); }) 
 
.attr("width", barWidth) 
 
.attr("height", function(d) { return height2-y2(d.Metric1); }); 
 

 
// context.append("g") 
 
// .attr("class", "x axis") 
 
// .attr("transform", "translate(0," + height2 + ")") 
 
// .call(xAxis2); 
 

 
context.append("g") 
 
.attr("class", "x brush") 
 
.call(brush) 
 
.call(brush.event) 
 
.selectAll("rect") 
 
.attr("y", -6) 
 
.attr("height", height2); 
 

 
var test = 0; 
 

 
function brushed() { 
 

 

 
var selected = x2.domain().filter(function(d){return (brush.extent()[0] <= x2(d)) && (x2(d) <= brush.extent()[1])}); 
 
x.domain(selected); 
 
var b =0; 
 
var w =0; 
 
if(selected.length < 2){ 
 
    b=barWidth; 
 
    w=b*2; 
 
} 
 
else{ 
 
    b = x(selected[1])-x(selected[0]); 
 
    var w = b/2; 
 
} 
 

 

 
var j = 0; 
 

 

 

 

 

 
focusGraph.attr("width", w); 
 
focusGraph.attr("id",function(d, i) { return d.Index;}); 
 
focusGraph.attr("height", function(d,i) { 
 
for(j=0;j<selected.length;j++) 
 
    { 
 
     if(d.Dim1 == selected[j]){ 
 
      console.log(d.Dim1 +"=="+selected[j]) 
 
       return d.Metric1; 
 
     } 
 
    } 
 
}); 
 
console.log(j); 
 
focusGraph.attr("x", function(d,i) { 
 
    for(j=0;j<selected.length;j++) 
 
    { 
 
     if(d.Dim1 == selected[j]){ 
 
      console.log(d.Dim1 +"=="+selected[j]) 
 
       return (x(selected[j]))+(barWidth/2); 
 
     } 
 
    } 
 
}); 
 
focus.select(".x.axis").call(xAxis); 
 

 
svg.append("g") 
 

 

 

 
} 
 

 
};