Если условие никогда не выполнялось, и поэтому мои столбцы на простой гистограмме всегда синего цвета, тогда как я хочу, чтобы они были красными для значений ниже определенного числа - PullRequest
Новая
       81

Если условие никогда не выполнялось, и поэтому мои столбцы на простой гистограмме всегда синего цвета, тогда как я хочу, чтобы они были красными для значений ниже определенного числа

0 голосов
/ 08 марта 2020

Я пытался этот код, чтобы создать гистограмму с заданными данными. Он работает, но никогда не возвращает красный, а всегда возвращает синий. Я попытался поставить b [i]> 0, но только синие полосы Функция wit с параметром b выполнена точно, и я тоже попробовал (b, i). 

<!DOCTYPE html>
<html>
<head>
    <script src = "https://d3js.org/d3.v5.min.js"></script>
  </head>
  <body>
    <svg height = "250px" width="500px"></svg>
    <script>
        var b = [5,9,6,4,3]; 
        var x = 100; 
        const height = 250; 
        for(var i=0; i<b.length;i++)
        {
            var svg = d3.select("svg").data(b).append("rect").attr("x",x)
           .attr("y",height - (b[i]*20))
           .attr("width",20).attr("height", b[i]*20).attr("fill", function(b){
                if(b[i]<6) //This if condition never gets checked and hence doesn't work
                {
                    return "red";
                }
                else
                {
                    return "blue"; //This executes
                }
            })
            x = x + 25; //Increment for the position of next bar
        }
     </script>
     </body>
     </html>

1 Ответ

1 голос
/ 08 марта 2020

Вы создаете теневую переменную b в качестве аргумента обратного вызова, так что это не массив, а его элемент. Поскольку вы используете цикл для рисования каждой точки отдельно, вы можете избежать использования обратного вызова для этого. Таким образом, вместо 

.attr("fill", function(b) { ... })

вам нужно написать это 

.attr("fill", b[i] < 6 ? "red" : "blue")

Кстати, d3 js может итерировать точки для вас: 

<script>
    var b = [5, 9, 6, 4, 3];
    var xOffset = 100;
    const height = 250;

    var svg = d3.select("svg")
        .selectAll('rect')
        .data(b)
        .enter()
        .append('rect')
        .attr("x", (d, i) => xOffset + 25 * i)
        .attr("y", d => height - d * 20)
        .attr("width", 20)
        .attr("height", d => d * 20)
        .attr("fill", d => d < 6 ? "red" : "blue");
</script>
...