标签: d3.js-v4

拖放示例

我试图重写上面这个例子的一部分,以便在我的代码中使用,特别是这篇文章:

function centerNode(source) {
        scale = zoomListener.scale();
        x = -source.y0;
        y = -source.x0;
        x = x * scale + viewerWidth / 2;
        y = y * scale + viewerHeight / 2;
        d3.select('g').transition()
            .duration(duration)
            .attr("transform", "translate(" + x + "," + y + ")scale(" + scale + ")");
        zoomListener.scale(scale);
        zoomListener.translate([x, y]);
    }

但是我因为v4包已经改变了很多而陷入困境.我写了我的zoomListener函数

    var zoomListener = d3.zoom()
                 .scaleExtent([0.3,2])
                 .on("zoom", zoomed);

    function zoomed() {
       transform = d3.event.transform;
       console.log(d3.event);
         svg.attr("transform", transform);
    } 

function centerNode(source){
  t = transform;
  console.log(t);
  x = t.x*t.k; //I …

我正在尝试使用Angular 2和D3 JS创建条形图,下面是我添加的NPM包:

"d3": "4.4.0",
"d3-tip": "0.7.1",
"@types/d3": "^4.3.0",

下面的typescript文件在编译时出错:

import { Component, ElementRef, ViewEncapsulation } from '@angular/core';
import * as d3 from 'd3';

@Component({
  selector: 'simple-bar-chart',
  template: require('./about.component.html'),
  styles: [require('./about.component.css').toString()]
})

export class AboutComponent {
constructor(public elementRef: ElementRef) {
}

ngOnInit() {
    var y = d3.scale.linear()
        .domain([0, 1])
        .range([height, 0]);

    var xAxis = d3.svg.axis()
        .scale(x0)
        .orient("bottom");

错误是:

ERROR in ./angular2App/app/components/about/about.component.ts
(34,21): error TS2339: Property 'scale' does not exist on type 'typeof "App_path/node_modules/@types/d3/index"'.

ERROR in ./angular2App/app/components/about/about.component.ts
(44,24): error TS2339: Property …

我正在尝试显示单个状态的地图,缩放和平移约束到状态的边界.它主要工作,除了平移约束时状态路径缩放以适应较小的容器.我认为这归结于我不理解使用什么参数zoom.translateExtent(虽然我对此很新,所以它可能是其他的东西).

bl.ocks.org上的实例,包含现有技术的链接.

一个值得注意的事情是我正在使用空投影d3.geoPath,因为我曾经ogr2ogr在每个状态的投影坐标中生成一个shapefile.这就是我使用缩放变换使地图适合其容器的原因.

我想在AngularJS 1.5x中使用D3.js v4

在过去,我使用.directives作为图表,但现在我想知道是否可以使用.components而不是指令,如果这是一个很好的做法.

检查Plunkr上的样品盒

问题出现在d3.select(element[0]).append('svg')内部组件中.控制台抛出错误:未定义元素.

所以我试着用类似的东西d3.select('chart-container').append('svg') 然后d3在第一个拥有该类的元素中注入所有图表(在所有文档中查找类,而不仅仅是组件).

所以...有人可以帮助我为可重用组件做正确的d3.select()吗？

没有为每个添加不同的ID(工作量太大,维护太难)

如何在D3版本4中为x轴和y轴提供单独的缩放比例？

帕特里克·布罗克曼(Patrick Brockman)的这个例子给出了一种在v3下非常有效的方法,它允许将缩放比例缩放到比例因子对象.相关代码:

  xyzoom = d3.behavior.zoom()
    .x(xscale)
    .y(yscale)
    .on("zoom", zoomable ? draw : null);
  xzoom = d3.behavior.zoom()
    .x(xscale)
    .on("zoom", zoomable ? draw : null);
  yzoom = d3.behavior.zoom()
    .y(yscale)
    .on("zoom", zoomable ? draw : null);

请注意,有两个缩放对象,每个轴对应一个,并且它们从轴标签/刻度区域和主绘图绑定,因此平移/缩放活动在所有三个区域中累积.

在新的范例中,有一个缩放变换对象与页面元素相关联,其中进行缩放,具有单个缩放因子和二维偏移.对影响缩放对象的支持会转换变换,而无需就地更新它.在所有三个区域之间共享缩放变换将仅给出一个缩放因子(更不用说放大轴标签/刻度区域仍然会影响另一个轴的问题),并且允许每个都有自己的缩放变换会产生可怕的应用顺序的问题(变换乘法不是可交换的).

甚至似乎没有一种简单的方法来获取单个步骤的变换并自己组合它们(尝试将缩放变换重置为标识会引发与用户操作相同的所有事件).

如何在版本4中实现各向异性缩放(不同方向的不同拉伸因子)？

这是我到目前为止所做的,这是完全错误的(它累积了缩放变换的效果,它本身就是缩放事件的累积):

function zoom_update() {
  svg.select('rect.zoom.x.box').call(d3.zoom().on('zoom', function() {
              xscale = d3.event.transform.rescaleX(xscale);
              update();
         }));
  svg.select('rect.zoom.y.box').call(d3.zoom().on('zoom', function() {
              yscale = d3.event.transform.rescaleY(yscale);
              update();
         }));
  svg.select('rect.zoom.xy.box').call(d3.zoom().on('zoom', function() {
              xscale = d3.event.transform.rescaleX(xscale);
              yscale = d3.event.transform.rescaleY(yscale);
              update();
         }));

是否有必要跳过zoom模块并直接处理鼠标事件？

我已经用我的问题创造了一个要点.

我从这个例子开始.

所以我的问题是我需要一些放大和缩小按钮以及鼠标控件.

使用zoom()行为实现鼠标控件(通过拖动缩放轮和平移).它工作得很好.

然后我添加了两个用于放大和缩小的按钮:

var _zoom = d3.zoom()
    .scaleExtent([1 / 2, 8])
    .on("zoom", zoomed);
var gui = d3.select("#gui")
gui.append("span")
  .classed("zoom in", true)
  .text("+")
  .on("click", function() { _zoom.scaleBy(container, 2); })
gui.append("span")
  .classed("zoom out", true)
  .text("-")
  .on("click", function(){ _zoom.scaleBy(container, 0.5); })

它们与鼠标行为发生冲突.要重现您必须缩放和拖动的错误(使用鼠标控件),然后单击+跨度:当前转换将被覆盖.

怎么解决？

如果您使用下面的可折叠树,您将看到当您到达树的末尾,并展开并折叠节点时,线条正在做一些古怪的东西,我不完全确定是什么驱使行为或我的重写的输入链接的描述在这里完全是大错特错.我使用了平面数据结构并使用分层将其转换为树形布局.到目前为止唯一的问题是线路转换...任何想法？

var data = [{
    "name": "Hazer 5000",
    "parent": "CFO",
    "img": "https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-342/stephen.jpg"
  }, {
    "name": "Employee 1",
    "parent": "Hazer 5000",
    "img": "https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-342/cory.jpg"
  }, {
    "name": "Analytics Area",
    "parent": "Hazer 5000",
    "img": "https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-342/matt.jpg"
  }, {
    "name": "Employee 2",
    "parent": "Hazer 5000",
    "img": "https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-342/XinheZhang.jpg"
  }, {
    "name": "Employee 3",
    "parent": "Hazer 5000",
    "img": "https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-342/craig.jpg"
  }, {
    "name": "Employee 4",
    "parent": "Hazer 5000",
    "img": "https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-342/youri.jpg"
  }, {
    "name": "Intern 1",
    "parent": "Analytics Area",
    "img": ""
  }, {
    "name": "Inter 2",
    "parent": …

我正在使用D3库来移动维恩图中的项目.当我停止拖动时,我想确定图表中项目的位置.

item.call(d3.drag()
    .on("start", this.dragstarted)
    .on("drag", this.dragged)
    .on("end", this.dragended)
);

这些是我在拖动开始时调用的函数,正在进行和结束.

dragended(d: TCMemberScenario, i: number) {
    d3.select(this).classed("active", false);
    d.calculateRoles();
    this.save();
}

这是拖动结束时调用的函数.我更新了图中的一些内容,然后我想调用save方法.这是班上的另一种方法.但是,此变量引用D3对象而不是类的实例.所以我得到一个"未捕获的TypeError:无法读取属性'保存'未定义"

我怎样才能从dragended方法中调用我班级的另一种方法？

我正在用D3（v4）写一棵树，以显示一种特殊类型的数据，其中结构具有很多级别。因此，我决定异步加载每个新级别的数据：当用户单击节点时，我会异步加载其子级。

我达到了预期的结果，但是我不确定这是最好的方法，因为我感觉自己在重写方向盘。有人可以确认我的代码或告诉我一种更好的方式来满足我的需求吗？我在互联网上找不到关于d3和这种异步性的任何信息...

这是简化的代码：

树初始化

// Starting data
var data = {
    "name": "node1",
    "children": [{
        "name": "child1",
        "children": []
    }, { 
        "name": "child2",
        "children": []
    }]
};
// Tree creation
var root = d3.hierarchy(data);

点击代码

function click(d) {
    loadChildrenFromServer(d, fooCallback);
}

function loadChildrenFromServer(d, callback) {
    //Simulating server call
    setTimeout(function () {
        //Mock async data
        var mockchildren = [{
            "name": "asyncChild1",
            "children": []
        }, {
            "name": "asyncChild2",
            "children": []
        }];

        d.data.children = children;    //Updating data
        d.children = [];               //Initializing d3 node …

我创建了绘制节点之间的箭头在我的D3图所示的片段自定义路径渲染器.我有最后一个问题,我被困住了,

如何旋转箭头部分使其指向曲线方向而不是光源方向？

var w2 = 6,
  ar2 = w2 * 2,
  ah = w2 * 3,
  baseHeight = 30;

// Arrow function
function CurvedArrow(context, index) {
  this._context = context;
  this._index = index;
}
CurvedArrow.prototype = {
  areaStart: function() {
    this._line = 0;
  },
  areaEnd: function() {
    this._line = NaN;
  },
  lineStart: function() {
    this._point = 0;
  },
  lineEnd: function() {
    if (this._line || (this._line !== 0 && this._point === 1)) {
      this._context.closePath();
    }
    this._line = 1 - this._line;
  },
  point: …

我做了一个我要实现的小例子，这里是-https://jsfiddle.net/zeleniy/4sgqgcx0/。您可以照常缩放和平移SVG图像。但是我不知道当用户单击“ +”和“-”按钮时如何以编程方式实现缩放。特别是当他已经放大/缩小和平移原始图像时。你可以帮帮我吗？

在代码的第13行，您将找到zoom事件处理程序。

var zoom = d3.zoom()
    .on('zoom', function() {
        canvas.attr('transform', d3.event.transform);
    });

在第35和39行-缩放事件处理程序

d3.select('#zoom-in').on('click', function() {
    // what here?
});

d3.select('#zoom-out').on('click', function() {
    // what here?
});

因此，当用户单击“ +”时，应用程序应该放大，就像鼠标位于SVG元素的中心一样。与“-”相同。

我尝试使用最新版本的d3.js 模仿这个可折叠的树,但是我遇到了一些问题.

nodeEnter代码的一部分执行得很好,但无论出于何种原因nodeUpdate,代码的转换部分都不会执行.我查看控制台以确保它不仅仅是一个可见性问题,我没有错误,没有...坐标保持与它们由nodeEnter代码部分启动时相同.我唯一的猜测是,新版本的d3.js发生了变化,我遗漏了一些东西......

var t = d3.transition()
.duration(750)
.ease(d3.easeLinear);

var tree = d3.tree()
  .size([height, width]);

function updateDisplay(source){
  
  var treeData = tree(root).descendants(),
      linkData = treeData.slice(1); 
  
  treeData.forEach(function(d) {
    
    /*Normalize for fixed-depth between levels, so that y value 
    **  stays the same through transition as opposed to being 
    **  an even division of the svg width. */
    d.y = d.depth *180;
    
  });
  
                            
  var node = svg.selectAll("g.node")
                .data(treeData);

  var nodeEnter = node.enter()
                      .append("g")
                        .attr("class", function(d) {return "node" …