D3.js 使用d3笔刷无法更改d3.time scale的域值_D3.js

D3.js 使用d3笔刷无法更改d3.time scale的域值

d3.js

D3.js 使用d3笔刷无法更改d3.time scale的域值,d3.js,D3.js,我已经构建了一个d3 js代码，用下面的d3.js代码在时间轴上绘制一个笔刷，我想做的是在拖动笔刷时更改d3.time.scale的域 <!DOCTYPE html> <html > <head> <title>Visualization of Room</title> <meta charset="utf-8"> <script src="http://d3js.

我已经构建了一个d3 js代码，用下面的d3.js代码在时间轴上绘制一个笔刷，我想做的是在拖动笔刷时更改d3.time.scale的域

<!DOCTYPE html>
<html >
   <head>
        <title>Visualization of Room</title>
        <meta charset="utf-8">
        <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
    </head>
    <body >

        <div id="abc" > </div>  
    </body>

    <script>

    var width = 1700,
        height = 700,
        padding = 100;

    // create an svg container
    var vis = d3.select("body").append("svg").attr("width", width).attr("height", height);

    var startHour = 9, endHour = 18, startTimeline = 100, endTimeline = 1200;

    var now = new Date(), 
    mindate = new Date( now.getFullYear (),now.getMonth(),now.getDate(),startHour),
    maxdate = new Date( now.getFullYear (),now.getMonth(),now.getDate(),endHour);
    var xScale = d3.time.scale().domain([mindate, maxdate]).range([startTimeline, endTimeline]);    

    var time_control, brush;
    function showTimeControl(){

        time_control = vis.append('g').attr('class','time_control'); 
        /*****************  brush  ************************/

        brush = d3.svg.brush().x(xScale).extent([mindate,maxdate])
                      .on("brush", onbrushmove)

        time_control.append("g").attr("class", "brush").call(brush)
                                 .selectAll("rect")                              
                                 .attr("y", 6)
                                 .attr("height",  50);  


    }
        function onbrushmove(){
            var s = brush.extent();
            //xScale.domain( s);
            console.log('on brush move',brush.empty(), s[0],s[1]);  
            document.getElementById('abc').innerHTML = s[0]+ "     "+s[1];          
        }  
    showTimeControl();


</script>

</html>

如果行xScale.domain s；如果未使用，控制台将正常输出更改值

您可以在jsfiddle演示中检查，它在一开始工作，但当您拖动更多时，它将停止工作

我不确定我是否理解正确。预期的行为是，当拖动笔刷时，选择将更改为笔刷覆盖的内容。这不是你想要的吗？我想做的是在拖动画笔时更改d3.time.scale的域，但它不起作用，你可以在上看到演示。实际上我想说，在JSFIDLE演示中，它在开始时就起作用，但当你拖动更多时，它将停止工作。JSFIDLE似乎对我没有任何作用。在将其设置为域之前，您可能需要检查画笔是否为空。画笔并非始终为空，我已再次更新了JSFIDLE

function onbrushmove(){
    var s = brush.extent();
    xScale.domain( s);
    console.log('on brush move',brush.empty(), s[0],s[1]);          
}