Question

我已经构建了一个d3 js代码，在时间轴线上使用以下d3.js代码刷一下，我想要做什么来改变d3.time.scale（）的域，因为我拖动画笔< / p>

<!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);，画笔将只显示相同的值/日期

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

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

你可以查看http://jsfiddle.net/UmpF5/，在jsfiddle演示中，它在开头工作，但是当你拖动更多时，它将停止工作

使用d3刷不能改变d3.time scale的域值

0 个答案: