javascript - D3.js gantt redraw with zoom not erase old tasks from code, and mouseevent on tasks not working -
i try use this: http://codepen.io/pau/pen/fkzea d3.js gantt chart zoom , scroll, have problems. version, added tasks in code, mousevent , line:
http://codepen.io/anon/pen/pgvdgm
when added task use button, scroll , zoom working good. when added tasks in code:
var tasks = [{"startdate":new date("sun dec 09 01:36:45 est 2012"), "enddate":new date("sun dec 09 02:36:45 est 2012"), "taskname":"e job", "status":"running"}, {"startdate":new date("sun dec 09 03:36:45 est 2012"), "enddate":new date("sun dec 09 04:36:45 est 2012"), "taskname":"e job", "status":"running"} ];
i see 2 tasks, when scroll or zoom, tasks not erase. why?
problem 2 when try add mouseevent tasks:
svg.selectall(".chart") .data(tasks, keyfunction).enter() .append("rect") .attr("rx", 5) .attr("ry", 5) .attr("class", function(d){ return tatus[d.status] || "bar"; }) .attr("y", 0) .attr("transform", recttransform) .attr("height", function(d) { return 5; }) // y.rangeband(); }) .attr("width", function(d) { return (x(d.enddate) - x(d.startdate)); }) .attr("clip-path", "url(#clip)") .on('mouseover', function(d) { alert("abcd"); });
event doesen't work. think problem css class:
.pane { cursor: move; fill: none; pointer-events: all; }
when change pointer-events auto, mouseevent work, scrollable gantt not work... how set property work both?
third problem drawline. add drawline method:
var drawline = function(svg){ var testdate = new date("sun dec 09 00:36:45 est 2012"); svg.append("line").attr( { "class":"horizontalgrid", "x1" : x(testdate), "y1" : 0, "x2" : x(testdate), "y2" : height, "fill" : "none", "shape-rendering" : "crispedges", "stroke" : "red", "z-index" : "550", "stroke-width" : "2px" });
};
and invoke in gantt function. line draw, when scroll chart, line not move. how fix it?
please see in page: http://codepen.io/anon/pen/pgvdgm 3 problems.
Comments
Post a Comment