Question

我记得在v3中能够很容易地做到这一点，但是我决定在最近一段时间之后给v4做一些事情，当然很多事情似乎都有所改变，至少语法明智。

所以我想我会从这个example开始，而不使用x轴的时间刻度。

我一直在尝试引用d3 scale api docs，但在尝试了各种事情（主要是ordinalScale()＆amp; scaleBand()之后）我似乎只能得到第一个和最后一个项目出现在x轴上。

生成线时，它似乎也在播放。

这是我的代码;

let tData = [{x: 1, y: 5}, {x: 2, y: 10}, {x: 3, y: 15}, {x: 4, y: 20}, {x: 5, y: 25}, {x: 6, y: 30}, {x: 7, y: 35}, {x: 8, y: 40}]

let svg = d3.select("svg"),
    margin = {top: 20, right: 20, bottom: 30, left: 50},
    width = +svg.attr("width") - margin.left - margin.right,
    height = +svg.attr("height") - margin.top - margin.bottom,
    g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");

let y = d3.scaleLinear().rangeRound([height, 0]);

let x = d3.scaleBand().rangeRound([0, width]).padding(0.1);

let line = d3.line()
    .x((d) => x(d.x))
    .y((d) => y(d.y))


x.domain(d3.extent(tData, ((d) => d.x)));

y.domain(d3.extent(tData, ((d) => d.y)));


g.append("g")
    .attr("transform", "translate(0," + height + ")")
    .call(d3.axisBottom(x))
    .select(".domain")
    .remove();

g.append("g")
    .call(d3.axisLeft(y))
    .append("text")
    .attr("fill", "#000")
    .attr("transform", "rotate(-90)")
    .attr("y", 6)
    .attr("dy", "0.71em")
    .attr("text-anchor", "end")
    .text("Price ($)");

g.append("path")
    .datum(tData)
    .attr("fill", "none")
    .attr("stroke", "steelblue")
    .attr("stroke-linejoin", "round")
    .attr("stroke-linecap", "round")
    .attr("stroke-width", 1.5)
    .attr("d", line);

和Plunk一起去;

http://plnkr.co/edit/EJqsjhaGNZ8u3PkEgy2l?p=preview

希望有人能指出我正确的方向？

谢谢！

Answer 1

因为x轴是scaleBand，所以需要知道所有可能的域“桶”。在this example of using strings for domain中，所有值都被标识为域值;不只是最小和最大。

在您的代码中使用：

x.domain(d3.extent(tData, ((d) => d.x)));

识别域的最小值和最大值。

相反，请尝试使用以下方法识别所有可能的值：

x.domain(tData.map( function(d) { return d.x; } ));

努力使用ordinalScale（）||实现标记的x比例scaleBand（）（d3 v4）

1 个答案: