我怎样才能使线条var x = d3.scale.ordinal().rangeRoundBands([0, width], .05);从这个例子中使用D3 V4工作d3.scaleBand？

我添加d3js到我的新项目:

并做一个简单的测试,以确保它的工作原理:

d3.select(".d3div").transition()
    .duration(750)
    .style("background-color", "black");

这项工作.然而:

var colors = d3.scale.category10().domain([0, 1, 2, 3, 4, 5, 6, 7, 8, 9]);

这给出了错误:

myd3.js:1未捕获的TypeError:无法读取未定义的属性'category10'

我也尝试了其他一些功能:

d3.scale.linear()

有一些错误:

myd3.js:3未捕获的TypeError:无法读取未定义的属性'linear'

如果我将导入更改为

<script src="https://d3js.org/d3.v3.js"></script>

然后它适用于函数,但transition动画不再工作.

我想使用最新版本.但似乎有一些我不知道的范围变化.

我该如何解决这个问题？

尝试按照我的小提琴中的Vegibit教程生成条形图.

该d3.min.js参考做工不错.

但是当我尝试使用以下方法实现下载的本地副本时:

<script type="text/javascript" src="~/Scripts/d3/d3.min.js"></script>

该路径由Visual Studio的ASP.NET项目工具自动生成

    d3BarChart({
      element: '#bar-chart',
      dataSource: [10, 20, 220, 240, 270, 300, 330, 370, 410, 30, 40, 50, 60, 70, 80, 90, 100, 110, 120,
          135, 150, 165, 180, 200],
    });

    function d3BarChart(chartConfig) {

      var dataSource = chartConfig.dataSource;
      var margin = { top: 30, right: 10, bottom: 30, left: 50 };

      var height = 400 - margin.top - margin.bottom,
          width = 720 - margin.left - margin.right, …

Tldr; this当Angular绑定this到类(组件/服务)时,如何处理引用D3对象？

我希望在Angular(v.4)应用程序中使用D3.js(v.4).

我的代码可以在独立的JavaScript中运行,但我现在需要将它集成到Angular应用程序中.

使用this是让我沮丧.

我有一个SVG组,我希望拖动,所以我使用 .call(drag)

someFunction() {
    this.unitGroup = this.svg.append('g')
            .attr('id', 'unitGroup');
            .call(drag)

}

当我尝试引用被拖动的svg元素时,我的问题出现了.在我的原始代码中,我可以参考this例如let matrix = this.getCTM().使用this是在服务中使用此代码的时候,现在不工作.

drag = d3.drag()
    .on('start', () => {
        this.setClickOrigin(d3.event);
    })
    .on('drag', (d) => {
        const m = this.getCTM(); // <--- PROBLEM HERE
        const x = d3.event.x - this.clickOrigin.x;
        const y = d3.event.y - this.clickOrigin.y;
        this.setClickOrigin(d3.event);
        d3.select(this) // <--- PROBLEM HERE
            .attr('transform', `matrix(${m.a},${m.b},${m.c},${m.d},${m.e + x},${m.f + y})`);
    });

关于如何实现这一点或澄清我做错的任何指示将不胜感激.

我不认为这只是与箭头函数this …

我的数据集包括UNIX时间戳,例如"1509392160".我似乎无法解析那些使用d3.timeParse("%s"),返回null.

检查反向过程也d3.timeFormat失败了.官方示例和所有其他格式字符串工作:

var formatTime = d3.timeFormat("%B %d, %Y");
formatTime(new Date); // -> "June 30, 2015"

但是,格式化为UNIX(毫秒)只会返回"%s"和"%Q"的"s"或"Q":

var formatTime = d3.timeFormat("%s");
formatTime(new Date); // -> "s"

使用D3 v4.11.0 btw.我错过了什么？

尽管经过无数次读取D3 API,我仍在努力理解D3中的合并功能.

API说:"此方法通常用于在数据连接后合并输入和更新选择.单独修改输入和更新元素后,您可以合并这两个选项并在两者上执行操作而无需重复代码."

这是一个在力导向图表中直截了当地使用它的例子,其中每个勾号都会调用勾选的函数:

var simulation = d3.forceSimulation(nodes)
    .force("charge", chargeForce)
    .force("center", centerForce)
    .on("tick", ticked);

    function ticked() {

    var u = d3.select("svg").selectAll("circle").data(nodes)

    u.enter().append("circle").attr("r",5)
        .merge(u) // What is the merge function doing here?
        .attr("cx", d => d.x)
        .attr("cy", d => d.y)

    u.exit().remove() // Why is it necessary to remove excess objects w/ the exit selection?

    }

我理解数据绑定是如何工作的,以及enter()和exit()选择是如何工作的.但是,我以前从未使用过"合并",我不明白它在这里做什么.如果有人可以一步一步地简要介绍这个功能中发生的事情,那将非常有用.我相信其他人也有类似的问题.

我现在一直在使用d3.js v4并且我已经了解到Mike Bostock已经用Promise本机JavaScript对象取代了v5版本中的d3.queue.我想和你联系,看看我写的代码是否正确排队(异步)这些URL:

var makeRequest = function() {
    "use strict";

    var bli = [
        "http://stats.oecd.org/sdmx-json/data/BLI2013/all/all",
        "http://stats.oecd.org/sdmx-json/data/BLI2014/all/all",
        "http://stats.oecd.org/sdmx-json/data/BLI2015/all/all",
        "http://stats.oecd.org/sdmx-json/data/BLI2016/all/all",
        "http://stats.oecd.org/sdmx-json/data/BLI/all/all"
    ];

    var promises = [];

    bli.forEach(function(url) {
        promises.push(
            new Promise(function(resolve, reject) {
                d3
                    .json(url)
                    .then(function(response) {
                        resolve(response);
                    })
                    .catch(function(error) {
                        console.log("Error on: " + url + ". Error: " + error);
                        reject(error);
                    });
            })
        );
    });

    Promise.all(promises).then(function(values) {
        console.log(values);
    });
};

makeRequest();

代码似乎运行正常,但是,这是正确的代码还是有更好的方法(最佳实践方法)与Promise.all和d3.js排队？catch错误是否正确实现？

我正在参加D3.js的Udemy课程.

不幸的是,由于D3.js的新版本问世,因此没有关于其新语法的最新教程,因此我浏览了他们的API的wiki.

话虽这么说,我一直坚持如何翻译这段代码(版本3).我正在学习顺序量表

var data = [
    {key: "Glazed",     value: 132},
    {key: "Jelly",      value: 71},
    {key: "Holes",      value: 337},
    {key: "Sprinkles",  value: 93},
    {key: "Crumb",      value: 78},
    {key: "Chocolate",  value: 43},
    {key: "Coconut",    value: 20},
    {key: "Cream",      value: 16},
    {key: "Cruller",    value: 30},
    {key: "Éclair",     value: 8},
    {key: "Fritter",    value: 17},
    {key: "Bearclaw",   value: 21}
];
var w = 800;
var h = 450;
var margin = {
    top: 20,
    bottom: 20,
    left: 20,
    right: 20
};
var width …

API中的描述令人困惑。我希望target该值是模拟停止滴答的值，但targetAPI中未定义。另外alpha本身没有在API中定义，但我发现，在其他网站： https://roshansanthosh.wordpress.com/2016/09/25/forces-in-d3-js-v4/

模拟的一个重要方面是alpha。alpha是介于0和1之间的数字，它定义了模拟进行的程度。模拟开始时，alpha设置为1，并且此值根据alphaDecay速率缓慢衰减，直到达到模拟的alphaTarget为止。一旦alpha值小于alphaTarget，模拟就会停止。默认情况下，alphaTarget设置为0.1

现在使用官方API：

Simulation.alphaMin（[min]）

如果指定了min，则将最小alpha设置为[0,1]范围内的指定数字，并返回此模拟。如果未指定min，则返回当前的最小alpha值，默认为0.001。当前的alpha值小于最小alpha值时，模拟的内部计时器停止。〜0.0228的默认alpha衰减率对应于300次迭代。

Simulation.alphaTarget（[target]）

如果指定了目标，则将当前目标alpha设置为[0,1]范围内的指定数字，并返回此模拟。如果未指定target，则返回当前的目标alpha值，默认为0。

有没有办法在D3强制导向图中禁用动画？

我正在使用这个例子:https://bl.ocks.org/mbostock/4062045

我想在没有初始动画的情况下渲染图形,即显示其最终位置中的所有节点和链接.