相关疑难解决方法(0)

什么是动态创建元素并能够移动它们的最佳方法？例如,假设我想创建一个矩形,圆形和多边形,然后选择这些对象并移动它们.

我知道HTML5提供了三个可以实现这一目标的元素:svg,canvas和div.对于我想要做的事情,哪一个元素将提供最佳性能？

为了比较这些方法,我考虑创建三个视觉上相同的网页,每个网页都有页眉,页脚,小部件和文本内容.第一页中的小部件将完全使用canvas元素创建,第二个完全使用svg元素创建,第三个使用plain div元素HTML和CSS创建.

D3 在此处具有力导向布局.有没有办法将缩放添加到此图表？目前,我能够捕获鼠标滚轮事件,但我不确定如何编写重绘功能本身.有什么建议？

    var vis = d3.select("#graph")
        .append("svg:svg")
        .call(d3.behavior.zoom().on("zoom", redraw)) // <-- redraw function
        .attr("width", w)
        .attr("height", h);

已经通过SVG几何变焦显示了用于力导向图几何缩放的许多情况.

在几何缩放中,我只需要在缩放功能中添加变换属性.但是,在语义缩放中,如果我只在节点中添加转换属性,则链接将不会连接到节点.所以,我想知道在d3中是否存在用于力导向图的几何缩放的解决方案.

这是我的例子与下面前一种情况的几何变焦.我有两个问题:

1. 当我缩小,然后拖动整个图形时,图形将奇怪地消失.
2. 使用相同的重绘功能

function zoom() {
  vis.attr("transform", transform);
}
function transform(d){
  return "translate(" + d3.event.translate + ")" + " scale(" + d3.event.scale + ")";
}

Run Code Online (Sandbox Code Playgroud)

这只更新了一个svg元素的"transform"属性.但是如何使功能改变节点位置？

但我想要做的是语义缩放.我试图修改缩放和转换功能,但不确定正确的方法.这是我尝试的.我改变的功能:

function zoom() {
  node.call(transform);
  // update link position
  update();
}
function transform(d){
  // change node x, y position, not sure what function to put here.
}

Run Code Online (Sandbox Code Playgroud)

我使用KineticJS和D3.js进行了以下操作.当用户将鼠标悬停在其中一个点上时,我使用KineticJS让我弹出工具提示.但是,由于画布的边界,工具提示似乎被截断.有没有一种方法可以让它出现而不会被剪裁？

整个代码本身非常庞大,包含很多不相关的东西,所以我发布了相关的代码片段:

    this.stage = new Kinetic.Stage({
        container: 'canvas',
        width: this.WIDTH,
        height: this.HEIGHT
    });

    this.circlesLayer = new Kinetic.Layer();
    this.tooltipLayer = new Kinetic.Layer();

    this.stage.reset();
    this.stage.clear();

    // Some d3 specific code
    this.xRange.domain([
        d3.min(this.data, function(d) {
        return d.x;
    }), d3.max(this.data, function(d) {
        return d.x;
    })]);

    this.yRange.domain([
        d3.min(this.data, function(d) {
        return d.y;
    }), d3.max(this.data, function(d) {
        return d.y;
    })]);

    var axes_transition = d3.select("#" + this.div).transition().duration(1000).ease("exp-in-out")

    // transition the axes
    axes_transition.select(".x.axis").call(this.xAxis);

    // Drawing the circles
    this.last = this.data.map(this.position);
    this.last.forEach(this.kineticCircle);

    // Setting up the tooltip
    this.tooltip = …