Question

我需要在LineChart的X轴上显示特定月份的日期。此时它只显示每个月的第一个日期：01-09＆amp; 01-10。我只想一次显示一个月，并在x轴上添加该月的所有日期。

JSON：

[{
"month": "september",
"detail": [{
    "date": "01-09",
    "value": 5
}, {
    "date": "02-09",
    "value": 5
}, {
    "date": "03-09",
    "value": 5
}, {
    "date": "04-09",
    "value": 5
}, {
    "date": "05-09",
    "value": 5
}, {
    "date": "06-09",
    "value": 5
}, {
    "date": "07-09",
    "value": 0
   }]
},
{
"month": "october",
"detail": [{
    "date": "01-10",
    "value": 10
}, {
    "date": "02-10",
    "value": 5
}, {
    "date": "03-10",
    "value": 5
}, {
    "date": "04-10",
    "value": 5
}, {
    "date": "05-10",
    "value": 5
}, {
    "date": "07-10",
    "value": 10
}]
}

这是我设置比例和x轴的方式：

var x = d3.scale.ordinal()
    .domain(data.map(function(d) {return [d.detail[0].date];}))
    .rangeBands([50, width - 20], 1);

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

注意：我试图创建一个LineChart，用户可以选择特定月份并在LineChart上显示。

Answer 1

您只需要更改域名即可。现在，您的域名：

.domain(data.map(function(d) {return [d.detail[0].date];}))

返回此数组：

[["01-09"],["01-10"]]

哪个不适合你：

我只想一次显示一个月，并在X轴上添加月份的所有日期

所以，这就是你想要展示九月的东西：

var x = d3.scale.ordinal()
    .domain(data[0].detail.map(function(d) {return d.date;}))
    .rangeBands([0, 500], 1);

而且，为了展示十月：

.domain(data[1].detail.map(function(d) {return d.date;}))

这是一个演示：

var svg = d3.select("svg");

var data = [{
    "month": "september",
    "detail": [{
        "date": "01-09",
        "value": 5
    }, {
        "date": "02-09",
        "value": 5
    }, {
        "date": "03-09",
        "value": 5
    }, {
        "date": "04-09",
        "value": 5
    }, {
        "date": "05-09",
        "value": 5
    }, {
        "date": "06-09",
        "value": 5
    }, {
        "date": "07-09",
        "value": 0
    }]
}, {
    "month": "october",
    "detail": [{
        "date": "01-10",
        "value": 10
    }, {
        "date": "02-10",
        "value": 5
    }, {
        "date": "03-10",
        "value": 5
    }, {
        "date": "04-10",
        "value": 5
    }, {
        "date": "05-10",
        "value": 5
    }, {
        "date": "07-10",
        "value": 10
    }]
}];

var x = d3.scale.ordinal()
    .domain(data[0].detail.map(function(d) {
        return d.date;
    }))
    .rangeBands([0, 440], 1);

var xAxis = d3.svg.axis()
    .scale(x)
    .orient("bottom");

svg.append("g")
    .attr("transform", "translate(0,120)")
    .call(xAxis);

path, line {
    fill: none;
    stroke: black;
    shape - rendering: crispEdges;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<svg width="450"></svg>

在x轴d3.js中显示特定数组

1 个答案: