freeCodeCamp

5.1 KiB

Raw Blame History

id	title	challengeType	videoUrl	localeTitle
587d7fad367417b2b2512bdf	Add Axes to a Visualization	6		Adicionar eixos a uma visualização

Description

Outra maneira de melhorar o gráfico de dispersão é adicionar um eixo xe um eixo y. D3 tem dois métodos axisLeft() e axisBottom() para renderizar os eixos y e x, respectivamente. (Axes é a forma plural do eixo). Aqui está um exemplo para criar o eixo x baseado no xScale nos desafios anteriores: const xAxis = d3.axisBottom(xScale); O próximo passo é renderizar o eixo na tela do SVG. Para fazer isso, você pode usar um componente SVG geral, o elemento g . O g representa o grupo. Ao contrário de rect , circle e text , um eixo é apenas uma linha reta quando é renderizado. Porque é uma forma simples, usando g obras. A última etapa é aplicar um atributo transform para posicionar o eixo na tela do SVG no lugar certo. Caso contrário, a linha seria renderizada ao longo da borda da tela do SVG e não seria visível. O SVG suporta diferentes tipos de transforms , mas o posicionamento de um eixo precisa ser translate . Quando é aplicado ao elemento g , ele move todo o grupo para cima e para baixo pelos valores dados. Aqui está um exemplo:

const xAxis = d3.axisBottom (xScale);

svg.append ("g")
.attr ("transformar", "traduzir (0," + (h - preenchimento) + ")")
.call (xAxis);

O código acima coloca o eixo x na parte inferior da tela do SVG. Então é passado como um argumento para o método call() . O eixo y funciona da mesma maneira, exceto que o argumento de translate está no formato (x, 0). Como translate é uma string no método attr() acima, você pode usar a concatenação para incluir valores de variáveis para seus argumentos.

Instructions

O gráfico de dispersão agora possui um eixo x. Crie um eixo y em uma variável chamada yAxis usando o método axisLeft() . Em seguida, renderize o eixo usando um elemento g . Certifique-se de usar um atributo transform para converter o eixo pela quantidade de unidades de preenchimento à direita e 0 unidades abaixo. Lembre-se de call() o eixo.

Tests

tests:
  - text: Seu código deve usar o método <code>axisLeft()</code> com <code>yScale</code> passado como argumento.
    testString: 'assert(code.match(/\.axisLeft\(yScale\)/g), "Your code should use the <code>axisLeft()</code> method with <code>yScale</code> passed as the argument.");'
  - text: 'O elemento y-axis <code>g</code> deve ter um atributo <code>transform</code> para converter o eixo por (60, 0).'
    testString: 'assert($("g").eq(1).attr("transform").match(/translate\(60\s*?,\s*?0\)/g), "The y-axis <code>g</code> element should have a <code>transform</code> attribute to translate the axis by (60, 0).");'
  - text: Seu código deve chamar o <code>yAxis</code> .
    testString: 'assert(code.match(/\.call\(yAxis\)/g), "Your code should call the <code>yAxis</code>.");'

Challenge Seed

<body>
  <script>
    const dataset = [
                  [ 34,     78 ],
                  [ 109,   280 ],
                  [ 310,   120 ],
                  [ 79,   411 ],
                  [ 420,   220 ],
                  [ 233,   145 ],
                  [ 333,   96 ],
                  [ 222,    333 ],
                  [ 78,    320 ],
                  [ 21,   123 ]
                ];

    const w = 500;
    const h = 500;
    const padding = 60;

    const xScale = d3.scaleLinear()
                     .domain([0, d3.max(dataset, (d) => d[0])])
                     .range([padding, w - padding]);

    const yScale = d3.scaleLinear()
                     .domain([0, d3.max(dataset, (d) => d[1])])
                     .range([h - padding, padding]);

    const svg = d3.select("body")
                  .append("svg")
                  .attr("width", w)
                  .attr("height", h);

    svg.selectAll("circle")
       .data(dataset)
       .enter()
       .append("circle")
       .attr("cx", (d) => xScale(d[0]))
       .attr("cy",(d) => yScale(d[1]))
       .attr("r", (d) => 5);

    svg.selectAll("text")
       .data(dataset)
       .enter()
       .append("text")
       .text((d) =>  (d[0] + "," + d[1]))
       .attr("x", (d) => xScale(d[0] + 10))
       .attr("y", (d) => yScale(d[1]))

    const xAxis = d3.axisBottom(xScale);
    // Add your code below this line
    const yAxis = undefined;
    // Add your code above this line

    svg.append("g")
       .attr("transform", "translate(0," + (h - padding) + ")")
       .call(xAxis);

    // Add your code below this line



    // Add your code above this line

  </script>
</body>

Solution

// solution required

5.1 KiB Raw Blame History Unescape Escape