Question

我尝试使用这个：http://codepen.io/Pau/pen/FKzEa d3.js带缩放和滚动的甘特图，但我有问题。这是我的版本，我在code，mousevent和line中添加了任务：

当我添加任务使用按钮时，滚动和缩放工作正常。但是当我在代码中添加任务时：

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"}
        ];

我看到两个任务，但是当我滚动或缩放时，此任务不会被删除。为什么呢？

问题二是当我尝试将mouseevent添加到任务时：

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");
        });

事件不起作用。我认为问题是css类：

.pane {
  cursor: move;
  fill: none;
  pointer-events: all;
}

当我将指针事件更改为auto，mouseevent工作，但可滚动的甘特图不起作用...如何设置此属性同时工作？

第三个问题是画线。我添加了drawline方法：

 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"
    });

};

并在甘特函数中调用它。线条是绘制的，但是当我滚动我的图表时，线条不会移动。如何解决？

请参阅此页：http://codepen.io/anon/pen/pgVdgm所有三个问题。

D3.js通过缩放重绘不会从代码中删除旧任务，并且对任务无效的鼠标执行

0 个答案: