D3.js - Seleções
Seleções é um dos conceitos básicos em D3.js. É baseado em seletores CSS. Ele nos permite selecionar um ou mais elementos em uma página da web. Além disso, permite-nos modificar, acrescentar ou remover elementos em relação ao conjunto de dados predefinido. Neste capítulo, veremos como usar seleções para criar visualizações de dados.
D3.js ajuda a selecionar elementos da página HTML usando os dois métodos a seguir -
select()- Seleciona apenas um elemento DOM correspondendo ao seletor CSS fornecido. Se houver mais de um elemento para o seletor CSS fornecido, ele seleciona apenas o primeiro.
selectAll()- Seleciona todos os elementos DOM correspondendo ao seletor CSS fornecido. Se você está familiarizado com a seleção de elementos com jQuery, os seletores D3.js são quase os mesmos.
Vamos examinar cada um dos métodos em detalhes.
O método select ()
O método select () seleciona o elemento HTML com base nos seletores CSS. Nos seletores CSS, você pode definir e acessar elementos HTML das três maneiras a seguir -
- Tag de um elemento HTML (por exemplo, div, h1, p, span, etc.,)
- Nome da classe de um elemento HTML
- ID de um elemento HTML
Vamos vê-lo em ação com exemplos.
Seleção por Tag
Você pode selecionar elementos HTML usando seu TAG. A seguinte sintaxe é usada para selecionar os elementos da tag “div”,
d3.select(“div”)Example - Crie uma página “select_by_tag.html” e adicione as seguintes alterações,
<!DOCTYPE html>
<html>
<head>
<script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
</head>
<body>
<div>
Hello World!
</div>
<script>
alert(d3.select("div").text());
</script>
</body>
</html>Ao solicitar a página da web por meio do navegador, você verá a seguinte saída na tela -
Seleção por nome de classe
Elementos HTML estilizados usando classes CSS podem ser selecionados usando a seguinte sintaxe.
d3.select(“.<class name>”)Crie uma página da web “select_by_class.html” e adicione as seguintes alterações -
<!DOCTYPE html>
<html>
<head>
<script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
</head>
<body>
<div class = "myclass">
Hello World!
</div>
<script>
alert(d3.select(".myclass").text());
</script>
</body>
</html>Ao solicitar a página da web por meio do navegador, você verá a seguinte saída na tela -
Seleção por ID
Cada elemento em uma página HTML deve ter um ID exclusivo. Podemos usar esse ID exclusivo de um elemento para acessá-lo usando o método select () conforme especificado abaixo.
d3.select(“#<id of an element>”)Crie uma página da web “select_by_id.html” e adicione as seguintes alterações.
<!DOCTYPE html>
<html>
<head>
<script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
</head>
<body>
<div id = "hello">
Hello World!
</div>
<script>
alert(d3.select("#hello").text());
</script>
</body>
</html>Ao solicitar a página da web por meio do navegador, você verá a seguinte saída na tela.
Adicionando Elementos DOM
A seleção D3.js fornece o append() e a text()métodos para acrescentar novos elementos aos documentos HTML existentes. Esta seção explica como adicionar elementos DOM em detalhes.
O método append ()
O método append () anexa um novo elemento como o último filho do elemento na seleção atual. Este método também pode modificar o estilo dos elementos, seus atributos, propriedades, HTML e conteúdo de texto.
Crie uma página da web “select_and_append.html” e adicione as seguintes alterações -
<!DOCTYPE html>
<html>
<head>
<script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
</head>
<body>
<div class = "myclass">
Hello World!
</div>
<script>
d3.select("div.myclass").append("span");
</script>
</body>
</html>Solicitando a página da web por meio do navegador, você pode ver a seguinte saída na tela,
Aqui, o método append () adiciona um novo intervalo de tag dentro da tag div, conforme mostrado abaixo -
<div class = "myclass">
Hello World!<span></span>
</div>O Método text ()
O método text () é usado para definir o conteúdo dos elementos selecionados / anexados. Vamos mudar o exemplo acima e adicionar o método text () conforme mostrado abaixo.
<!DOCTYPE html>
<html>
<head>
<script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
</head>
<body>
<div class = "myclass">
Hello World!
</div>
<script>
d3.select("div.myclass").append("span").text("from D3.js");
</script>
</body>
</html>Agora atualize a página da web e você verá a seguinte resposta.
Aqui, o script acima executa uma operação de encadeamento. D3.js inteligentemente emprega uma técnica chamada dechain syntax, que você pode reconhecer de jQuery. Encadeando métodos junto com pontos, você pode executar várias ações em uma única linha de código. É rápido e fácil. O mesmo script também pode acessar sem sintaxe de cadeia, conforme mostrado abaixo.
var body = d3.select("div.myclass");
var span = body.append("span");
span.text("from D3.js");Modificando Elementos
D3.js fornece vários métodos, html(), attr() e style()para modificar o conteúdo e o estilo dos elementos selecionados. Vamos ver como usar métodos de modificação neste capítulo.
O método html ()
O método html () é usado para definir o conteúdo html dos elementos selecionados / anexados.
Crie uma página da web “select_and_add_html.html” e adicione o seguinte código.
<!DOCTYPE html>
<html>
<head>
<script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
</head>
<body>
<div class = "myclass">
Hello World!
</div>
<script>
d3.select(".myclass").html("Hello World! <span>from D3.js</span>");
</script>
</body>
</html>Ao solicitar a página da web por meio do navegador, você verá a seguinte saída na tela.
O método attr ()
O método attr () é usado para adicionar ou atualizar o atributo dos elementos selecionados. Crie uma página da web “select_and_modify.html” e adicione o seguinte código.
<!DOCTYPE html>
<html>
<head>
<script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
</head>
<body>
<div class = "myclass">
Hello World!
</div>
<script>
d3.select(".myclass").attr("style", "color: red");
</script>
</body>
</html>Ao solicitar a página da web por meio do navegador, você verá a seguinte saída na tela.
O método style ()
O método style () é usado para definir a propriedade de estilo dos elementos selecionados. Crie uma página da web “select_and_style.html” e adicione o seguinte código.
<!DOCTYPE html>
<html>
<head>
<script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
</head>
<body>
<div class = "myclass">
Hello World!
</div>
<script>
d3.select(".myclass").style("color", "red");
</script>
</body>
</html>Ao solicitar a página da web por meio do navegador, você verá a seguinte saída na tela.
O método classed ()
O método classed () é usado exclusivamente para definir o atributo “class” de um elemento HTML. Desde então, um único elemento HTML pode ter várias classes; precisamos ter cuidado ao atribuir uma classe a um elemento HTML. Este método sabe como lidar com uma ou mais classes em um elemento e terá um bom desempenho.
Add class- Para adicionar uma classe, o segundo parâmetro do método classificado deve ser definido como verdadeiro. É definido abaixo -
d3.select(".myclass").classed("myanotherclass", true);Remove class- Para remover uma classe, o segundo parâmetro do método classificado deve ser definido como falso. É definido abaixo -
d3.select(".myclass").classed("myanotherclass", false);Check class- Para verificar a existência de uma classe, basta omitir o segundo parâmetro e passar o nome da classe que você está consultando. Isso retornará verdadeiro, se existir, falso, se não existir.
d3.select(".myclass").classed("myanotherclass");Isso retornará verdadeiro, se algum elemento da seleção tiver a classe. Usard3.select para seleção de elemento único.
Toggle class - Para virar uma classe para o estado oposto - remova-a se já existir, adicione-a se ainda não existir - você pode fazer uma das seguintes opções.
Para um único elemento, o código pode ter a seguinte aparência -
var element = d3.select(".myclass")
element.classed("myanotherclass", !oneBar.classed("myanotherclass"));O método selectAll ()
O método selectAll () é usado para selecionar vários elementos no documento HTML. O método select seleciona o primeiro elemento, mas o método selectAll seleciona todos os elementos que correspondem à sequência de seleção específica. Caso a seleção não corresponda a nenhum, ele retorna uma seleção vazia. Podemos encadear todos os métodos de modificação anexados,append(), html(), text(), attr(), style(), classed(),etc., no método selectAll () também. Nesse caso, os métodos afetarão todos os elementos correspondentes. Deixe-nos entender, criando uma nova página da web “select_multiple.html” e adicionando o seguinte script -
<!DOCTYPE html>
<html>
<head>
<script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
</head>
<body>
<h2 class = "myclass">Message</h2>
<div class = "myclass">
Hello World!
</div>
<script>
d3.selectAll(".myclass").attr("style", "color: red");
</script>
</body>
</html>Ao solicitar a página da web por meio do navegador, você verá a seguinte saída na tela.
Aqui, o método attr () se aplica a ambos div e h2 tag e a cor do texto em ambas as tags muda para vermelho.