Обновление оси Y - PullRequest
Новая
       7

Обновление оси Y

0 голосов
/ 29 ноября 2018

Уважаемое сообщество переполнения стека,

Я настоящий новичок в d3.Я борюсь с неделю уже и решил спросить.Я также много исследовал и испытал много вещей, но это все еще не работает.Мне нужно обновить гистограмму в соответствии с данными из файла JSON.Ось Y должна измениться в соответствии с полем «L».Я мог бы реализовать механизм обновления без каких-либо проблем для оси X, но ось Y не меняется и остается прежней.Я пытался ссылаться на него с помощью оси .y, а также оси .y, также пытался изменить имя класса, однако ось y по-прежнему не изменилась.Я понятия не имею, что не так с моим кодом.

[Редактировать] Я мог бы выяснить функцию изменения цвета при наведении курсора на столбцы, просто обновив ось Y, которую я до сих пор не могу получить дальше.

Я надеюсь, что любой может помочь мне, я так застрял и не имею понятия, что я сделал неправильно.

Большое спасибо за вашу помощь.

Веськод должен быть включен в один HTML-файл.

Это более чистая версия, чем раньше.

    `<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="https://d3js.org/d3.v5.min.js"></script>

    <style>
        .container {
            float: left;
        }

    </style>
</head>
<body>
<h1>KBO Rankings</h1>
<div id="drop1"></div>
<div id="drop2"></div>
<div id="drop3"></div>
<div id="table" class="container">
</div>
<div id="chart1" class="container">
    <svg id="firstSvg"></svg>
</div>
<div id="chart2" class="container">
    <svg id="secondSvg"></svg>
</div>


<script>
    // entries of second dropdown list
    let drop2data = ["WR", "DG"];
    let drop3data = ["W", "D", "L"];
    let tablehdata = ["rank", "team", "W", "D", "L", "win_rate", "diff_game"];

    let dropDownL1 = d3.select("#drop1")
        .append('select')
        .attr("id","yearSelector");

   let dropDownL2 = d3.select("#drop2")
       .append('select')
       .selectAll('option')
       .data(drop2data).enter()
       .append('option')
       .text(function(d){
           return d;
       });
    let dropDownL3 = d3.select("#drop3")
                    .append('select')
                    .selectAll('option')
                    .data(drop3data)
                    .enter()
                    .append('option')
                    .text(function(d){
                        return d;
                    });

    // creating table
    var table = d3.select("#table").append("table")
                .attr("width",500)
                .attr("height",300);
    var thead = table.append("thead");
    var tbody = table.append("tbody");


        var jsondata = d3.json("data.json").then(function(data){
            for(var i = 0; i< data.length;i++) {
                    let options1 = dropDownL1.selectAll('option')
                    .data(data).enter()
                    .append('option')
                    .text(function(d){
                        console.log(d.year);
                        for(var j = 0;j < d.rankings.length;j++) {
                            console.log(d.rankings[j].team);
                        }
                        return d.year;
                    }).attr("indexVal",function(d,i){
                            return i;
                        });
            }

            thead.append("tr")
                .selectAll("th")
                .data(tablehdata)
                .enter()
                .append("th")
                .text(function(column){
                    return column;
                });

            tbody.selectAll("tr").remove();
            rows = tbody.selectAll("tr")
                .data(data[0].rankings)
                .enter()
                .append("tr")
                .on("mouseover", function(d){
                    d3.select(this)
                        .style("font-weight", "bold");
                })
                .on('mouseout', function(d){
                    d3.select(this)
                        .style("font-weight","normal");
                });

            cells = rows.selectAll("td")
                .data(function(row){
                    return tablehdata.map(function(column){
                        return {
                            column: column, value: row[column]
                        }
                    });
                })
                .enter()
                .append("td")
                .html(function(d){
                    return d.value;
                });

            cells.exit().remove();
           // baseBTable = tabulate(data[33].rankings,["rank", "team", "W", "D", "L", "win_rate", "diff_game"]);

        });

        // getting option of select


    // 1st axes 1st chart
    var margin = {top: 30, right: 30, bottom: 30, left: 50},
        width = 500 - margin.left - margin.right,
        height = 320 - margin.top - margin.bottom;


    // 1st chart

    var xAxisData = [1985, 1990, 1995, 2000, 2005, 2010, 2015];

    const svg1 = d3.select("#chart1").select("#firstSvg")
        .attr("width", width + margin.left + margin.right)
        .attr("height", height + margin.top + margin.bottom)
        .append("g")
        .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

    const yScale1 = d3.scaleLinear()
        .range([height,0])
        .domain([0.2,0.7]);

    const chart1 = svg1.append("g")
        .call(d3.axisLeft(yScale1));

    const xScale1 = d3.scaleBand()
        .range([0,width])
        .domain(xAxisData)
        .padding(0.2);

    chart1.append("g")
        .attr("transform","translate(0, "+height+")")
        .call(d3.axisBottom(xScale1));


    // 2nd chart
    var colorScale = d3.scaleOrdinal(d3.schemePaired);
    const svg2 =  d3.select("#chart2").select("#secondSvg")
        .attr("width", width + margin.left + margin.right)
        .attr("height", height + margin.top + margin.bottom)
        .append("g")
        .attr("transform", "translate(" + margin.left + "," + margin.top + ")");


    var xScale = d3.scaleBand()
        .rangeRound([0,width])
        .padding(0.1);

    var yScale = d3.scaleLinear()
        .range([height,0]);
    var chart2;

    var xAxisCall = d3.axisBottom();
    var yAxisCall = d3.axisLeft();

    d3.json("data.json").then(function(data){
        //for(var i = 0;i<data[0].rankings.length;i++){
        //domainX.push(data[0].rankings[i].team);
        //}


        xScale.domain(data[0].rankings.map(function(d){
            return d.team;
        }));
        yScale.domain([0,d3.max(data[0].rankings, function(d){
            return d.L;
        })]);
        xAxisCall.scale(xScale);
        yAxisCall.scale(yScale);
        chart2 = svg2.append("g")
            .attr("class", "y axis")
            .call(yAxisCall);

        chart2.append("g")
            .attr("class","x axis")
            .attr("transform", "translate(0, " + height  +")")
            .call(xAxisCall);

        chart2.selectAll(".bar")
            .data(data[0].rankings)
            .enter().append("rect")
            .attr("class","bar")
            .attr("x",function(d){
                return xScale(d.team);
            })
            .attr("y", function(d){
                return yScale(d.L);
            })
            .attr("width",xScale.bandwidth())
            .attr("height", function(d){
                return height -yScale(d.L);
            })
            .style("fill", function(d,i){
                return colorScale(i);
            })
            .attr("id",function(d,i){
                return i;
            })
            .on("mouseover", function(d){
                d3.select(this)
                    .style("fill","brown");
            })
            .on("mouseout",function(d,i){
                d3.select(this).style("fill",function(){
                    return ""+colorScale(this.id)+"";
                });
            });
    });
       function change(){
           var columns = ["rank", "team", "W", "D", "L", "win_rate", "diff_game"];
           var rows, cells;
           selected = d3.select("#yearSelector").node().value;
          d3.json("data.json").then(function(data){
              for(var i=0;i<data.length;i++){
                  if(selected == data[i].year){
                      tbody.selectAll("tr").remove();
                      rows = tbody.selectAll("tr")
                          .data(data[i].rankings)
                          .enter()
                          .append("tr")
                          .on("mouseover", function(d){
                                d3.select(this)
                                    .style("font-weight", "bold");
                          })
                          .on('mouseout', function(d){
                                d3.select(this)
                                    .style("font-weight","normal");
                          });

                      cells = rows.selectAll("td")
                          .data(function(row){
                              return columns.map(function(column){
                                  return {
                                      column: column, value: row[column]
                                  }
                              });
                          })
                          .enter()
                          .append("td")
                          .attr('class', 'enter')
                          .transition();

                          cells.text(function(d){
                              return d.value;
                          });


                    // problem to update y axis

                     yScale.domain([0,d3.max(data[i].rankings, function(d){
                          console.log("Wert ist "+d.L);
                          return d.L;
                      })]);


                      chart2.select('.y')
                          .call(yAxisCall);

                      xScale.domain(data[i].rankings.map(function(d){
                          return d.team;
                      }));

                      chart2.selectAll(".x")
                          .call(xAxisCall);

                      var bars = chart2.selectAll(".bar")
                          .remove()
                          .exit()
                          .data((data[i].rankings));


                      bars.enter()
                          .append("rect")
                          .attr("class","bar")
                          .attr("x",function(d){
                              return xScale(d.team);
                          })
                          .attr("y", function(d){
                              return yScale(d.L);
                          })
                          .attr("width",xScale.bandwidth())
                          .attr("height", function(d){
                              return height -yScale(d.L);
                          })
                          .style("fill", function(d,i){
                              return colorScale(i);
                          })
                          .attr("id",function(d,i){
                              return i;
                          })
                          .on("mouseover", function(d){
                                    d3.select(this)
                                  .style("fill","brown");
                          })
                          .on("mouseout",function(d,i){
                              d3.select(this).style("fill",function(){
                                  return ""+colorScale(this.id)+"";
                              });
                          });
                      bars.transition()
                          .attr("y", function(d,i) { return yScale(d); })
                          .attr("height", function(d,i) { return height - yScale(d); });

                      bars.exit().remove();

                  }
              }
          });
       };

       dropDownL1.on("change",change);

</script>
</body>
</html>

`

Это файл json: https://ufile.io/8qnft

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...