Question

我试图创建一个包含从JSON获得的数据的条形图。这在我的测试驱动器中正常工作，它有来自csv的数据，但是我的问题在我的图表中显示了x轴。以下是它当前的显示方式：

How it's currently displayed

var svg = d3.select("svg"),
margin = {top: 20, right: 20, bottom: 30, left: 40},
width = +svg.attr("width") - margin.left - margin.right,
height = +svg.attr("height") - margin.top - margin.bottom;

var x = d3.scaleOrdinal().range([0, width]);
var y = d3.scaleLinear().rangeRound([height, 0]);


var g = svg.append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

d3.json(urljson, function(error, data) {
    data = data.results;
data.forEach(function(d) {
    d.result = +d.result;
});
console.log(data);

x.domain(data.map(function(d) {return d.date } ));
y.domain([0, d3.max(data, function(d) {return d.result; })]);

g.append("g")
    .attr("class", "axis axis--x")
    .attr("transform", "translate(0," + (height) + ")")
    .call(d3.axisBottom(x));
console.log(x.domain());
console.log(y.domain());

g.append("g")
    .attr("class", "axis axis--y")
    .call(d3.axisLeft(y))
    .append("text")
    .attr("transform", "rotate(-90)")
    .attr("y", 6)
    .attr("dy", "0.71em")
    .attr("text-anchor", "end")
    .text("Value");

g.selectAll(".bar")
    .data(data)
    .enter()
    .append("rect")
        .attr("class", "bar")
        .attr("x", function(d) {return x(d.date); })
        .attr("y", function(d) {return y(d.result); })
        .attr("height", function(d) {return height - y(d.result);})
});

我正在使用的JSON看起来像这样：

{
"count": 5,
"next": null,
"previous": null,
"results": [
    {
        "date": "2017-09-22",
        "result": 35.9
    },
    {
        "date": "2017-09-23",
        "result": 65.12
    },
    {
        "date": "2017-09-24",
        "result": 11.23
    },
    {
        "date": "2017-09-25",
        "result": 77.8
    },
    {
        "date": "2017-09-26",
        "result": 108.98
    }
]
}

Answer 1

由于x是序数比例，因此您必须设置一个具有相同域数元素的范围。根据API：

如果范围中的元素少于域中的元素，则比例将从范围的开头重用值。（强调我的）

这是一个演示，显示代码的行为：域中的所有值都将打印在0或width：

＆＃13;

var svg = d3.select("svg");

var scale = d3.scaleOrdinal()
  .domain(["foo", "bar", "baz", "foobar", "foobaz"])
  .range([10, 290])
  
var xAxis = d3.axisBottom(scale);
  
svg.append("g")
  .attr("transform", "translate(0,50)")
  .call(xAxis);

＆＃13;

<script src="https://d3js.org/d3.v4.min.js"></script>
<svg></svg>

＆＃13;

解决方案：一种简单的替代方法是使用波段比例（或点比例，具体取决于您的目标）。所以，它应该是：

var x = d3.scaleBand().range([0, width]);

这是使用波段标度的相同代码：

＆＃13;

var svg = d3.select("svg");

var scale = d3.scaleBand()
  .domain(["foo", "bar", "baz", "foobar", "foobaz"])
  .range([10, 290])
  
var xAxis = d3.axisBottom(scale);
  
svg.append("g")
  .attr("transform", "translate(0,50)")
  .call(xAxis);

＆＃13;

<script src="https://d3js.org/d3.v4.min.js"></script>
<svg></svg>

＆＃13;

PS：我在你的代码中看到你的矩形没有宽度。如果您决定使用波段比例，您可以执行以下操作：

.attr("width", x.bandwidth())

D3 x轴未正确显示

1 个答案: