Articles of d3.js

Atualizando o elemento Z do índice SVG com D3

O que é uma maneira eficaz de trazer um elemento SVG ao topo da ordem z, usando a biblioteca D3? Meu cenário específico é um gráfico de pizza que destaca (adicionando um stroke ao path ) quando o mouse está sobre uma determinada peça. O bloco de código para gerar meu gráfico está abaixo: svg.selectAll(“path”) […]

O código dentro do retorno de chamada de d3.json () não é executado

Eu estou tentando carregar um arquivo GeoJSON e desenhar alguns charts usando-o como base com o D3 v5 . O problema é que o navegador está pulando tudo o que está dentro da chamada d3.json() . Eu tentei inserir pontos de interrupção para testar, mas o navegador pula sobre eles e não consigo descobrir o […]

Como adicionar uma dica de ferramenta a um gráfico svg?

Eu tenho uma série de retângulos svg (usando D3.js) e eu quero exibir uma mensagem no mouseover, a mensagem deve ser cercada por uma checkbox que atua como plano de fundo. Ambos devem estar perfeitamente alinhados entre si e com o retângulo (no topo e no centro). Qual é a melhor maneira de fazer isso? […]

Como invocar o evento “click” programaticamente em d3?

Eu estou tentando assim (também em https://gist.github.com/1703994 ): $(function() { var w = 600, h = 350; var vis = d3.select(“#test”).append(“svg:svg”) .attr(“width”, w) .attr(“height”, h) .append(“svg:g”) .attr(“transform”, “translate(” + w / 2 + “,” + h / 2 + “)”); var g = vis.selectAll(“g”) .data([ { x:1 , y: 2} ]) .enter().append(“svg:g”); g.append(“svg:path”) .attr(“fill”, “red”) […]

csv para matriz em d3.js

Eu estou usando isso para analisar um arquivo csv e criar uma matriz de dados conforme especificado em d3 docs: d3.csv(“afile.csv”, function(data) { data.forEach(function(d) { d.date = formatDate.parse(d.date); d.price = +d.price; }); Porém, se depois desse método eu tentar chamar data[0] ele diz que é indefinido. Isto é porque os data são uma referência e […]

Redimensionar svg quando a janela é redimensionada em d3.js

Estou desenhando um gráfico de dispersão com d3.js. Com a ajuda desta pergunta: Obtém o tamanho da canvas, a página da web atual e a janela do navegador Eu estou usando esta resposta: var w = window, d = document, e = d.documentElement, g = d.getElementsByTagName(‘body’)[0], x = w.innerWidth || e.clientWidth || g.clientWidth, y = […]

Adicionando uma imagem dentro de um object de círculo em d3 javascript?

Meu objective é adicionar uma imagem a um círculo existente com d3. O círculo será renderizado e será interativo com o método mouseover, mas somente quando eu usar “fill”, “color” e não algo mais sofisticado como .append (“image”). g.append(“circle”) .attr(“class”, “logo”) .attr(“cx”, 700) .attr(“cy”, 300) .attr(“r”, 10) .attr(“fill”, “black”) // this code works OK .attr(“stroke”, […]

Como incluo novas linhas em labels nos charts D3?

Estou usando o D3 para gerar um gráfico de barras (adaptei o código deste exemplo ). Os labels que estou usando no eixo x têm algumas palavras cada um e, como isso faz com que todos os labels se sobreponham, preciso dividi-los em linhas. (Tudo bem se eu puder replace todos os espaços em cada […]

Hiperlinks em objects d3.js

Eu sou um novato completo em d3.js ou java em geral. Eu estou usando o exemplo de tree recuada de http://bl.ocks.org/1093025 . Levei duas horas para fazer isso funcionar no meu computador local, de modo que deveria dar uma idéia do meu nível de habilidade. Eu abri o arquivo flare.json e comecei a brincar com […]

Como posso trazer um círculo para a frente com d3?

Primeiro de tudo, estou usando d3.js para exibir círculos de tamanhos diferentes em matrizes. Ao passar o mouse, quero que o círculo fique mais grande, o que eu posso fazer, mas não tenho ideia de como trazê-lo para a frente. Atualmente, uma vez processada, ela fica oculta atrás de vários outros círculos. Como posso consertar […]