Javascript D3.js图形显示错误_Javascript_D3.js

Javascript D3.js图形显示错误

javascript d3.js

Javascript D3.js图形显示错误,javascript,d3.js,Javascript,D3.js,我试图运行一个数据可视化应用程序，我使用的是D3.js，我的代码可以工作，但当我更改所选选项时，图形会更改，但会下降，每次更改都会下降。我不知道问题出在哪里这是我的密码： <!DOCTYPE html> <html> <head> <title> Graphique </title> <script src="http://d3js.org/d3.v4.min.js" charset="utf-8">&

我试图运行一个数据可视化应用程序，我使用的是D3.js，我的代码可以工作，但当我更改所选选项时，图形会更改，但会下降，每次更改都会下降。我不知道问题出在哪里

这是我的密码：

<!DOCTYPE html>
<html>

<head>
    <title> Graphique </title>
    <script src="http://d3js.org/d3.v4.min.js" charset="utf-8"></script>
    <script src="https://d3js.org/d3-selection-multi.v1.min.js"></script>
</head>

<body>
   <FORM>
    <SELECT id="Nb" size="1" onchange="Changement()">
        <option>Selection</option>
        <option>NbCopie</option>
        <option>NbTache</option>
        <option>NbCopieBW</option>
        <option>NbCopieCouleur</option>
        <option>MtTotal</option>
    </SELECT>
</FORM>

<div id="chart"></div>
        <svg width="960" height="500"></svg>
        <script>

function Changement() {
        d3.selectAll("svg > *").remove();
        d3.json("Data.json", function(error, data) {
            var Nb = data.map(function(d) {
                var x = document.getElementById('Nb');
                var i = x.selectedIndex;
                var text = x.options[i].text;
                if (text == "NbCopie")
                    return d.NbCopie;
                else if (text == "NbTache")
                    return d.NbTache;
                else if (text == "NbCopieBW")
                    return d.NbCopieBW;
                else if (text == " NbCopieCouleur")
                    return d.NbCopieCouleur;
                else if (text == "MtTotal")
                    return d.MtTotal;
            });
            var maxNb = d3.max(Nb);

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

            var tooltip = d3.select('body').append('div')
                .style('position', 'absolute')
                .style('background', '#f4f4f4')
                .style('padding', '5 15px')
                .style('border', '1px #333 solid')
                .style('border-raduis', '5px')
                .style('opacity', '0')

            var yScale = d3.scaleLinear()
                .domain([0, maxNb])
                .range([0, height])

            var xScale = d3.scaleBand()
                .domain(d3.range(0, Nb.length))
                .range([0, width])

            var colors = d3.scaleLinear()
                .domain([0, Nb.length])
                .range(['#0080FF', '#FF3333'])

            var myChart = d3.select('#chart').append('svg')
                .attr('width', width + margin.right + margin.left)
                .attr('height', height + margin.top + margin.bottom)
                .append('g')
                .attr('transform', 'translate(' + margin.left + ',' + margin.top + ')')
                .style('background', '#f4f4f4')
                .selectAll('rect')
                .data(Nb)
                .enter().append('rect')
                .style('fill', function(d, i) {
                    return colors(i);
                })
                .attr('width', xScale.bandwidth())
                .attr('x', function(d, i) {
                    return xScale(i)
                })
                .attr('height', 0)
                .attr('y', height)
                .on('mouseover', function(d) {
                    tooltip.transition()
                        .style('opacity', 1)
                    tooltip.html(d)
                        .style('left', (d3.event.pageX) + 'px')
                        .style('top', (d3.event.pageY + 'px'))
                    d3.select(this).style('opacity', 0.5)
                })

            .on('mouseout', function(d) {
                tooltip.transition()
                    .style('opacity', 0)
                d3.select(this).style('opacity', 1)
            })

            myChart.transition()
                .attr('height', function(d) {
                    return yScale(d);
                })
                .attr('y', function(d) {
                    return height - yScale(d);
                })
                .duration(animateDuration)
                .delay(function(d, i) {
                    return i * animateDelay
                })
                .duration(1000)
                .ease(d3.easeElastic)

            var vScale = d3.scaleLinear()
                .domain([0, maxNb])
                .range([height, 0])

            var vAxis = d3.axisLeft()
                .scale(vScale)
                .ticks(5)
                .tickPadding(5)

            var vGuide = d3.select('svg')
                .append('g')
            vAxis(vGuide)
            vGuide.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')')
            vGuide.selectAll('path')
                .style('fill', 'none')
                .style('stroke', '#000')
            vGuide.selectAll('line')
                .style('stroke', '#000')

            var hScale = d3.scaleTime()
                .domain(d3.extent(data, function(d) {
                    var parseDate = d3.timeParse("%Y%m%d");
                    Date_Id = parseDate(d.Date_Id);
                    return Date_Id;
                }))
                .range([0, width - 150])

            var hAxis = d3.axisBottom()
                .scale(hScale)
                .ticks(d3.timeMonth)

            var hGuide = d3.select('svg')
                .append('g')
                .attr("class", "axis axis--x")
                .attr("transform", "translate(" + margin.left + "," + (height + margin.top) + ")")
                .call(hAxis);

        });
    };
</script>

不要每次选择一个选项时都附加一个新的SVG

因此，不是：

var myChart = d3.select('#chart').append('svg')
    .attr('width', width + margin.right + margin.left)
    .attr('height', height + margin.top + margin.bottom)
    .append('g')
    //etc...

简单地做：

var myChart = svg.append('g')
    //etc...

下面是一个仅包含该更改的plunker，使用您提供的小JSON示例：

PS：正如我在中所说的，这段代码现在有很多问题，主要的问题是您正在擦除SVG中的所有内容只是为了再次绘制它，第二个问题是您每次选择一个选项时都在加载相同的JSON。也就是说，您应该重新考虑这段代码中的一个主要重构。请记住，这里我只回答您问题中提到的问题。

您能提供一个示例Data.json吗？不要每次选择一个选项时删除SVG中的元素只是为了再次绘制它们。我称之为延迟更新。除此之外，您还必须在代码中进行一次重大重构：将

d3.json

放在

change

之外，而不是反过来（您不需要每次选择一个选项时都加载/解析数据），并将大部分代码移到

change

之外，只剩下代码的一小部分可以改变刻度和条形图。好的，我会尝试用你的技巧来改进它。我是新手，3周前我才知道这一点，所以我真的需要提高自己！谢谢你的帮助

var myChart = svg.append('g')
    //etc...