0

我正在尝试学习 SVG 图，我几乎完成了我的图，但是我目前有重叠的条，我相信这是由于我的 x 轴返回数据和我的 json 数据的组合。我的 x 轴列出了我的 JSON 数据中的月份，但我的 JSON 数据可以有来自同一个月的多个条目。如果是这种情况，那么我的条目将在该月重叠。我需要做的是分别返回月份+日期，但是我还没有弄清楚如何。

JSON 数据示例，其中同一个月有 2 个条目：

1: {dayNo: 2, monthNo: 7, monthName: "July", year: 2018, recordDate: "2018-07-02T00:00:00",…}
avgVolume: 3585.53
dayNo: 2
monthName: "July"
monthNo: 7
recordDate: "2018-07-02T00:00:00"
volumeLastYear: 4109.47
volumeToday: 3575.34
year: 2018
2: {dayNo: 30, monthNo: 7, monthName: "July", year: 2018, recordDate: "2018-07-30T00:00:00",…}
avgVolume: 3291.55
dayNo: 30
monthName: "July"
monthNo: 7
recordDate: "2018-07-30T00:00:00"
volumeLastYear: 3996.31
volumeToday: 3414.44
year: 2018

这是svg代码：

            $request.done(function (response) {
            // remove old svg
            $('svg').remove();

            // create svg element
            var $svg = d3.select('.card.mb-3.clickable-card.highlight')
                .append('svg')
                .attr('width', '100%')
                .attr('height', '400px')
                .attr('style', 'background-color: lavender')
                .classed('svg display-svg', true);

            // 2 determine size of svg element
            var w = $svg.node().getBoundingClientRect().width;
            var h = $svg.node().getBoundingClientRect().height;

            // 10 chart margins
            var chartMargin = new Object();
            chartMargin.left = 40;
            chartMargin.right = 25;
            chartMargin.top = 25;
            chartMargin.bottom = 40;

            // 10 cont
            h = h - chartMargin.bottom - chartMargin.top;

            // Max volume
            var maxVolume = d3.max(response, d => d.avgVolume);

            // bar Margins / width
            var barMargin = 10;
            var barWidth = (w - chartMargin.left - chartMargin.right) / response.length;

            // yScale
            var yScale = d3.scaleLinear()
                .domain([0, maxVolume])
                .range([h, chartMargin.top]);

            // xScale
            var xScale = d3.scaleBand()
                .domain(response.map(function (d) { return d.monthName; }))
                .range([0, w - chartMargin.left - chartMargin.right])
                .paddingInner(0.15);

            // chartGroup
            var chartGroup = $svg.append('g')
                .classed('chartGroup', true)
                .attr('transform', 'translate(' + chartMargin.left + ',' + chartMargin.top + ')');

            // 5
            var barGroups = chartGroup
                .selectAll('g')
                .data(response);

            // 6
            var newBarGroups = barGroups.enter()
                .append('g')
                .attr('transform', function (d, i) {
                    return 'translate('
                        + (xScale(d.monthName))
                        + ','
                        + (yScale(d.avgVolume))
                        + ')';
                })

            // yAxis label
            var yAxis = d3.axisLeft(yScale);
            chartGroup.append('g')
                .classed('axis y', true)
                .attr('transform', 'translate(' + -20 + ', ' + h / 2 + ')')
                .append('text')
                .attr('transform', 'rotate(-90)')
                .attr('dx', '-0.8em')
                .attr('dy', '0.25em')
                .attr("text-anchor", 'middle')
                .text("Reservoir Volume (ML)");


            // xAxis label
            var xAxis = d3.axisBottom(xScale);
            chartGroup.append('g')
                .attr('transform', 'translate(0,' + h + ')')
                .classed('axis x', true)
                .call(xAxis);

            newBarGroups
                .append('rect')
                .attr('x', 0)
                .attr('height', function (d, i) {
                    return h - yScale(d.avgVolume);
                })

                // animation
                .style('fill', 'transparent')
                .transition().duration(function (d, i) { return i * 500; })
                .delay(function (d, i) { return i + 200; })

                .attr('width', barWidth - barMargin)
                .style('fill', function (d, index) {
                    return "hsl(240, 100%, " + (d.avgVolume / maxVolume * 80) + "%)"
                });

            // bar text
            newBarGroups
                .append('text')
                .attr('transform', 'rotate(-45)')
                .attr('text-anchor', 'middle')
                .attr('x', function () { return 0; })
                .attr('y', 50)
                .attr('fill', 'white')
                .text(function (d, i) { return d.avgVolume; })
                .style('font-size', '1em')

        });

在 xScale 中，我尝试将返回数据从

return d.monthName

到

return d.monthName + ' ' + d.dayNo

但是随后我的所有条形都重叠了，并且每个 g 元素都出现此错误：d3.js:1211 错误：属性转换：预期数字，“翻译（未定义，25.183 ...”。

这是我目前返回的 d.monthName： 在此处输入图像描述

这是 d.monthName + ' ' + d.dayNo： 在此处输入图像描述

4

1 回答 1

0

没关系对不起，我修好了

我需要改变

            var newBarGroups = barGroups.enter()
            .append('g')
            .attr('transform', function (d, i) {
                return 'translate('
                    + (xScale(d.monthName))
                    + ','
                    + (yScale(d.avgVolume))
                    + ')';
            })

到

                var newBarGroups = barGroups.enter()
                .append('g')
                .attr('transform', function (d, i) {
                    return 'translate('
                        + (xScale(d.monthName + ' ' + d.dayNo))
                        + ','
                        + (yScale(d.avgVolume))
                        + ')';
                })
于 2020-06-01T07:44:42.790 回答