D3.js Line刷完后超过x轴

Question

我的图表中的画笔/缩放行为有问题。

当我放大区域时，图形超出了x轴的边界，除非缩放窗口覆盖图形的整个宽度。

我无法弄清楚我错过了什么。

draw函数中的画笔代码是：

  brush = d3.svg.brush()
      .x(mini_x)
     .on("brush", brush);

mini
    .call(brush)
    .selectAll("rect")
    .attr("y", -6)
    .attr("height", mini_height + 7);

// brush:
function brush() {

  x.domain(brush.empty() ? mini_x.domain() : brush.extent());
  mainE.select(".tline") .attr("d", function(d) {return line(dataset); });
  main.select(".x.axis").call(xAxis);
}

以下是代码和代码段。

感谢您的帮助。

编辑：我将图形代码简化为不使用更新模式。一切都已初始化，然后显示在绘图功能中。

编辑2：我尽可能地密切关注this example并提出了这个问题：https://jsfiddle.net/cd3wah72/此次线路仅在左侧超出。我还是没弄明白发生了什么事。

var d3graph = (function () {

var w = 800;
var h = 250;

//margin
var margin = {top: 20, right: 80, bottom: 100, left: 40},
    mini_margin = {top: (h - margin.bottom), right: 80, bottom: 20, left: 40},
    width = w - margin.left - margin.right,
    height = h - margin.top - margin.bottom,
    mini_height = h - mini_margin.top - mini_margin.bottom;

// size svg
var svg = d3.select("#disp")
  .attr("width", width + margin.left + margin.right)
  .attr("height", height + margin.top + margin.bottom);

//main graph group
var main = svg.append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
// brush view group
var mini = svg.append("g").attr('class', 'brush')
    .attr("transform", "translate(" + mini_margin.left + "," + mini_margin.top + ")");
//x scales
var x = d3.time.scale().range([0, width]);
var mini_x = d3.time.scale().range([0, width]);

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

var mini_y = d3.scale.linear()
  .domain([0, 100])
  .range([mini_height, 0]);

// line object
var line = d3.svg.line()
  .interpolate("cardinal")
  .x(function(d) {
    return x(d.date);
  })
  .y(function(d) {
    return y(d.value.mag);
  });  


// x axis
var xAxis = d3.svg.axis()
    .scale(x)  //xbar
    .orient("bottom")
    .ticks(d3.time.hours, 6)
    .tickFormat(d3.time.format('%m/%d %I:%M%p')); 

var mini_xAxis = d3.svg.axis()
    .scale(x)  //xbar
    .orient("bottom")
    .ticks(d3.time.hours, 6)
    .tickFormat(d3.time.format('%m/%d %I:%M%p')); 

// y axis
var yAxis = d3.svg.axis()
    .scale(y)
    .orient('left')
    .ticks(4) //make var
    .tickPadding(8);

// axis groups
main.append("g")
    .attr("class", "x axis")
    .attr("transform", "translate(+"+0+"," + height + ")")
    .call(xAxis)
    .selectAll("text")
    .style("text-anchor", "end");

mini.append("g")
    .attr("class", "x axis")
    .attr("transform", "translate(+"+0+"," + mini_height + ")")
    .call(xAxis)
    .selectAll("text")
    .style("text-anchor", "end");

main.append('g')
  .attr('class', 'y axis').attr("transform", "translate(-"+0+"," +0 + ")")
  .call(yAxis);

// brush group
mini.append("g").attr("class", "x brush");

var parseDate = d3.time.format("%Y-%m-%d %H:%M:%S").parse;

var brush;

////////////////////////////////////////////////////////////////////////
///////// draw function
///////////////////////////////////////////////////////////////////////
function draw(dataset){

//parse dates
dataset.forEach(function(d) { 
  if(typeof(d.date) === "string"){ d.date = parseDate(d.date); }
});
//sort dates
dataset = dataset.sort(sortByDateAscending);

// x update domain
x.domain(d3.extent(dataset, function (d) { return d.date; }));
// update brush x domain
mini_x.domain(d3.extent(dataset, function (d) { return d.date; }));

//append main graph line
main.append("path")
  .attr("class", "tline")
  .style('fill', 'none')
  .style('stroke', 'red')
 // .style('opacity', '0.3')
  .attr("d", function(d) {
    return line(dataset);
  });

// append brush graph line
mini.append("path")
  .attr("class", "tline")
  .style('fill', 'none')
  .style('stroke', 'red')
 // .style('opacity', '0.3')
  .attr("d", function(d) {
    return line(dataset);
  });

// call x axis
main.selectAll("g.x.axis")
  .attr('id', 'xaxs')
  .call(xAxis)
  .selectAll("text")
  .style("text-anchor", "end")
  .attr("dx", "+"+0+"px")
  .attr("dy", "+10px");

//create brush
 brush = d3.svg.brush()
    .x(mini_x)
    .on("brush", brush);

// call brush
mini
    .call(brush)
    .selectAll("rect")
    .attr("y", -6)
    .attr("height", mini_height + 7);

// brush function
function brush() {
 
  x.domain(brush.empty() ? mini_x.domain() : brush.extent());
  main.select(".tline") .attr("d", function(d) {return line(dataset); });
  main.select(".x.axis").call(xAxis);
}

}

function sortByDateAscending(a, b) {
    return Date.parse(a.date) - Date.parse(b.date);
};


return {
    draw : draw
  }
})();

///////////////////////////////////////////////////
// data generating code:

var tdata = [

{
    "property":"temperature",
    "date":"2016-06-28 05:47:10",
    "value": {"mag": 70, "string": "70 F"},
    "link" : "http://www.google.com"
}
];

// build array
for (var i = 0; i <50; i++) {
	addObjs(tdata);
}

// display graph	
d3graph.draw(tdata);	

// clones object, increments date, appends to array
function addObjs(arr) {
var t = JSON.parse(JSON.stringify(arr[arr.length-1])); 

t.date = incDate(t);
t.value.mag = 65 + Math.floor(Math.random()*28);
t.value.string = ''+t.value.mag+' '+'F';

arr.push(t);

function incDate(inobj){ 
var d = new Date(inobj.date);
var newdate = new Date(d.getTime());
var t = inc(d.getMinutes());
newdate.setMinutes(t);

return newdate;

function inc(innum){
var num = innum + 30; 
var rtn =  num < 10 ? '0'+ num : num;
return rtn.toString();
}
}
	
}

.axis path,
.axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
.tarea, .harea{
pointer-events: none;	
}
.property {
    fill: none;
    stroke-width: 0.75px;
   shape-rendering: auto;
}
body {
  font: 11px sans-serif;
}

#bkgd{
fill: #4FF0CF;
} 
#disp{
	width:800px;
	float: left;
}

.tooltip{
  font: 14px sans-serif;
  font-weight: 500;
  position: absolute;
  visibility: hidden;
  display: table;
  border-radius: 15px;
  padding: 10px;
}
#buttons{
  clear: both;
}
.brush .extent {
  stroke: #fff;
  fill-opacity: .125;
  shape-rendering: crispEdges;
}
rect .brush{
  cursor: move;
  fill: none;
  stroke: black;
  pointer-events: all;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<svg id="disp"></svg>

Answer 1

这是一个老问题，我相信你找到了解决方案但是有一天这对某人有用，解决方案是：

mini
  .call(brush)
  .selectAll("rect")
  .attr("y", 0)
  .attr("height", mini_height);

因为您向y和高度添加了一些值，所以它会溢出。