D3 Js Moving Average

Eu sou novo no D3 e estou tentando fazer uma média móvel dos valores anteriores e futuros nos meus dados, de modo a suavizar. Atualmente, eu tenho trabalhando usando os 2 valores anteriores do valor atual. Funciona, mas 1) como eu também usaria os próximos valores e 2) e se eu quisesse usar os 15 valores anteriores e 15 próximos (seria louco ter 30 vars individuais para armazená-los todos) Eu costumava fazer Javascript tradicional, mas perdeu a forma de percorrer os dados dessa maneira no D3. Espero que alguém possa me iluminar, obrigado. Ou apenas o código de análise de dados aqui: A seguinte publicação é uma parte do documento Dicas e truques do D3 que é gratuito para baixar. Para usar esta publicação em contexto, considere isso com os outros no blog ou simplesmente baixe o pdf e / ou os exemplos da página de downloads :-) As dicas de ferramentas têm uma dualidade maravilhosa. Eles são, por um lado, uma coisa útil e muito útil que ajuda a dar contexto e informações quando necessário e, por outro lado, se feito com um pouco de cuidado, eles podem parecer muito elegantes :-). Tecnicamente, eles representam um pequeno movimento do que jogamos até agora em uma arena ligeiramente mais complexa de transições e eventos. Você pode assumir esta de duas maneiras. Aceite que apenas funciona e implemente-o como mostrado, ou você saberá o que está acontecendo e sinta-se livre para ridicularizar meus esforços como os de um amador de classificação :-). A fonte para a implementação foi tirada do exemplo de Mike Bostocks aqui bl. ocks. org/1087001. Isso foi combinado com alguns outros pedaços (o mais complicado de descobrir como formatar a data exibida corretamente e inserir uma quebra de linha na dica de ferramenta (que encontrei aqui groups. google/forum/fromgroupstopic/d3-js/GgFTf24ltjc ( Bem feito para todos aqueles que participam dessa discussão). Eu presumo que qualquer ou todos os erros que ocorrem na implementação serão os meus, enquanto que qualquer sucesso será baixo para os contribuidores originais. Então, apenas no caso de haver algum Grau de confusão, uma dica de ferramenta (uma palavra ou duas) é uma informação discreta que aparecerá quando o mouse estiver pairando em algum lugar específico. A maioria de nós já os viu e usou, mas suponho que todos nós tendemos a chamá-los Coisas diferentes como infotip, dica ou caixa de suspensão. Não sei se há um nome certo para eles, mas heres um exemplo do que estava tentando alcançar. Você pode ver o mouse sobrever um dos círculos da parcela de dispersão e uma dica apareceu Que fornece ao usuário o Data exata e valor para esse ponto. Agora, você também pode notar que há um certo grau de fantasia aqui, pois a informação é vinculada por uma forma retangular com cantos arredondados e uma leve opacidade. O outro pedaço de fantasia que você não vê em um pdf é que, quando essas dicas de ferramentas aparecem e desaparecem, elas fazem isso de forma elegante e desvanecida. Purty. Agora, antes de começarmos a descrever como o código vai juntos, vamos dar uma rápida olhada nas duas especificidades técnicas que mencionei anteriormente, transições e eventos. Transições A partir das transições principais da página web d3.js (d3js. org) são descritas como interpolando gradualmente estilos e atributos ao longo do tempo. Então, o que eu quero dizer é que, se quiser mudar um objeto, você pode fazer, basta especificar o ponto final do atributo / estilo que você quer que ele acabe e o tempo que você deseja e vá, claro. , Não é assim tão simples, mas felizmente, pessoas mais inteligentes do que fiz um trabalho fantástico descrevendo diferentes aspectos das transições, então veja o seguinte para obter uma descrição mais completa do tópico. Esperamos observar as transições do mouse e do mouseout nas dicas de ferramentas. Seu apetite por mais A outra técnica está relacionada aos eventos do mouse. Isso descreve o navegador procurando quando algo acontece com o mouse na tela e, quando o faz, é preciso uma ação especificada. Uma lista (provavelmente não abrangente) dos tipos de eventos é o seguinte mousedown: Ativado por um elemento quando um botão do mouse é pressionado sobre o mouseup: Ativado por um elemento quando um botão do mouse é liberado sobre ele mouseover: Disparado por um Elemento quando o mouse passa por cima do mouse: Ativado por um elemento quando o mouse sair dele mousemove: Ativado por um elemento em cada mouse, mova-se sobre ele. Clique: disparado por um clique do mouse: mousedown e, em seguida, mouseup sobre um menu de contexto de elemento: ativado por um clique com o botão direito do mouse sobre um elemento. Dblclick: Disparado por dois cliques dentro de um curto período de tempo sobre um elemento. Quantos destes são válidos para usar no d3. Eu não tenho certeza, mas estou disposto a apostar que provavelmente há mais do que aqueles aqui também. Por favor, vá para javascript. info/tutorial/mouse-events para uma descrição muito melhor do tópico, se necessário. Obter inclinação Então, reforçada com alguns novos conceitos a considerar, vamos ver como eles são promulgados na prática. Se começarmos com nosso gráfico de gráfico de dispersão simples, há 4 áreas que queremos modificar (talvez seja mais fácil verificar o arquivo tooltips. html nos arquivos de exemplo na seção de downloads em d3noob. org). A primeira área é o CSS. O código a seguir deve ser adicionado antes da tag lt / stylegt. Esses estilos estão definindo como nossa dica de ferramenta aparecerá. A maioria deles é bastante direta. A posição da dica de ferramenta é feita em medições absolutas, não relativas. O texto está alinhado ao centro, a altura, largura e cor do retângulo são 28px, 60px e lightsteelblue, respectivamente. O preenchimento é uma característica interessante que fornece uma maneira pura de crescer uma forma por uma quantidade fixa de um tamanho especificado. Definimos o boarder para 0px para que ele não apareça e um estilo limpo (atributo) chamado border-radius fornece os cantos arredondados agradáveis ​​no retângulo. Por fim, mas de forma alguma, os eventos do ponteiro: nenhuma linha está no lugar para instruir o evento do mouse para passar pelo elemento e alvejar tudo o que estiver embaixo desse elemento em vez disso (Leia mais aqui developer. mozilla. org/en-US/ Docs / CSS / pointer-events). Isso significa que, mesmo se a dica de ferramenta obscurecer parcialmente o círculo, o código funcionará como se o mouse não excedesse o círculo. A segunda adição é um simples one-liner que deveria (para os formulários) ser colocado sob a declaração de variável parseData Esta linha formata a data em que aparece na nossa dica de ferramenta. Sem isso, o tempo seria padrão para uma combinação perturbadora de detalhes temporais. No caso aqui declaramos que queremos ver o dia do mês (e) e o nome do mês completo (B). O terceiro bloco de código é a declaração de função para div. Podemos colocá-lo logo após a definição valuelina no JavaScript. Mais uma vez, não há muito aqui, isso é surpreendente. Dizemos para anexar div ao elemento do corpo, definimos a classe na classe tooltip (do CSS) e configuramos a opacidade para zero. Pode parecer estranho ter a opacidade definida para zero, mas lembre-se, esse é o estado natural de uma dica de ferramenta. Vai viver sem ser visto até o momento da revelação chegar e aparecer. O último bloco de código é um pouco mais complexo e pode ser descrito como uma versão mutante do pequeno pedaço de código que usamos para fazer o desenho dos pontos para o Trama de dispersão. Isso porque as dicas de ferramentas são tudo sobre os círculos da parcela de dispersão. Sem um círculo para mouseover, a dica de ferramenta nunca aparece :-). Então, o código que inclui o desenho do diagrama de dispersão (é incluído desde a sua integralidade) Antes de começar a seguir o código, o arquivo de exemplo para dicas de ferramentas que está em d3noob. org inclui uma breve série de comentários para as linhas que são adicionadas Ou mudou do gráfico de dispersão, então se você quiser comparar o que está acontecendo no contexto, essa é uma opção. As primeiras seis linhas do código são uma repetição do script de desenho do gráfico de dispersão. As únicas mudanças são que aumentamos o raio do círculo de 3,5 para 5 (apenas para facilitar o mouse sobre o objeto) e removemos o ponto-e-vírgula da linha de atributo cy, já que o código agora tem que continuar. Assim, as adições são divididas em áreas que correspondem aos dois eventos. Mouseover e mouseout. Quando o mouse se move sobre qualquer um dos círculos no gráfico de dispersão, o código do mouse é executado no elemento div. Quando o mouse é deslocado para fora do círculo, um conjunto diferente de instruções são executadas. Seria um erro pensar em dicas de ferramentas no plural, porque não há toda uma série de informações individuais apenas esperando para aparecer em seu círculo específico. Existe apenas uma dica de ferramenta que aparecerá quando o mouse se mover sobre um círculo. E, de acordo com o encerramento do círculo, as propriedades da dica de ferramenta alteram-se ligeiramente (em termos de posição e conteúdo). On. mouseover The. On (mouseover line inicia a introdução da dica de ferramenta. Em seguida, declaramos o elemento que vamos introduzir (div) e que vamos aplicar uma transição para sua introdução (. Transition ()). As próximas duas linhas descrevem a transição. Levará 200 milissegundos (duração (200)) e resultará na alteração da opacidade dos elementos para .9 (. Style (opacidade 9)). Dado que o estado natural da nossa dica de ferramenta é uma opacidade de 0, isso faz sentido para Algo aparecendo, mas não faz todo o caminho para um objeto sólido e ele mantém uma leve transparência apenas para torná-lo menos permanente. As três linhas a seguir formam a nossa dica de ferramenta. O primeiro adiciona um elemento html que contém nossas informações x e y (A data e o valor d. close). Agora isso é feito de forma ligeiramente estranha. Outras dicas de ferramentas que eu vi usaram um elemento. text em vez de um. html, mas eu usei. html neste caso porque Eu queria incluir a etiqueta de redução de linha 8220ltbr / gt8221 para separar o d Comi e valorizava. Tenho certeza de que existem outras maneiras de fazê-lo, mas isso funcionou para mim. A outra parte interessante desta linha é que é aqui que chamamos nossa função de formatação de tempo que descrevemos anteriormente. As próximas duas linhas posicionam a dica de ferramenta na tela e, assim, elas agem as coordenadas x e y do mouse quando o evento ocorrer (com os trechos d3.event. pageX e d3.event. pageY) e aplique uma correção em O caso da coordenada y para aumentar a dica de ferramenta na mesma quantidade que a sua altura (28 pixels). On. mouseout The. (A seção do mouseout é ligeiramente mais simples na medida em que não precisa fazer nenhum material de texto / html / coordenada extravagante. Tudo o que precisa fazer é desvanecer o elemento div. E isso é feito simplesmente invando a opacidade de volta para 0 e a configuração A duração da transição para 500 milissegundos (sendo um pouco mais longa do que o fade-in faz com que pareça um pouco mais frio, IMHO). Certo, você vai. Como uma descrição, acabou sendo um pouco de uma parede de texto Estou com medo. Entre a explicação e o código de exemplo, você terá a idéia. Tire o tempo para mexer com as configurações descritas aqui para encontrar as que funcionam para você e no processo, você reforçará alguns dos princípios que ajudam a D3 a fazer o que é. Coloquei uma cópia do arquivo para desenhar as dicas de ferramentas na seção de downloads em d3noob. org com os exemplos gerais como tooltips. html. Edite: 2014-05-02: Depois de uma pergunta interessante abaixo, adicionei uma nova postagem sobre a inclusão de uma Link HTML nas dicas de ferramentas e pode ser fou E aqui. A descrição acima (e um monte de outras coisas) está no documento D3 Tips and Tricks que pode ser acessado a partir da página de downloads do d3noob. org. Seguiu seus exemplos do início ao fim e os achou realmente úteis. Como um novato completo na D3 I39ve percorreu os últimos dois dias e começou a trabalhar com meus próprios dados. Atualmente, atualmente duas linhas no gráfico são exibidas corretamente e agora estou olhando para configurar uma transição que permitirá que cada linha seja inserida ao clicar em um botão. Qualquer exemplo de como isso funcionaria, agradecemos seu esforço em obter tudo isso em linha, Great Justin. Excelente ouvir que a informação é útil. Eu não tenho um exemplo para o código básico que você poderia seguir, mas se isso é um consolo, ele está na minha lista (longa e cada vez mais longa) de coisas para adicionar ao manual de dicas e truques. Mike Dewar tem um bom exemplo em seu livro 39Com começado com o D339 que usa várias linhas e você alterna uma legenda para ativá-los e desligar. Mas por meu dinheiro, eu começaria com uma excelente publicação de Jerome Cukier em transições aqui blog. visual. ly/creating-animations-and-transitions-with-d3-js/ um de seus exemplos parece exatamente o que você descreve e eu vou Tenha um longo e difícil olhar para ele quando chegar a hora de adicionar isso ao manual. Quando você obtê-lo ordenado, se você acha que seria uma adição útil ao manual de dicas e truques, eu realmente gostaria de adicioná-lo (se você estiver feliz de liberar o código :-)) Obrigado pela leitura. A resposta é Yes w3schools / html / htmllinks. asp foi meu amigo. Tristemente, tentar colocar o código nos comentários aqui confunde o blog e ele tenta se conectar ao URL em vez de exibi-lo :-(. Mas basta adicionar um link de exemplo pela página w3schools acima para a linha que adiciona o texto para o seu hiperlink . O único aspecto semi-complicado que eu tive que fazer era colocar o link (com tags) em marcas de fala únicas em vez de duas marcas de fala, uma vez que a URL precisava estar em marcas de fala duplas. O único problema real, então, ser a fim de Alcance-o você precisa mover o mouse até agora que a dica de ferramenta desaparece (é claro que isso pode ser resolvido por vários meios, dependendo do que é apropriado para a dica de ferramenta). Então sim. Grande pergunta e uma resposta real Simplesmente eu fiquei excitado e didn39t lido Sua postagem corretamente Agora que eu vejo que estou enfrentando o mesmo problema que você é. Eu acho que há uma solução, mas envolve o bloqueio de eventos de mouse. Portanto, eu estou perguntando se podemos estar em uma situação de frango / ovo onde podemos fazer Uma coisa, mas isso nos impede de fazer Outro. Hmm. Obrigado pela resposta rápida. Eu tentei isso, e eu coloquei um atraso na transição do mouseout, de modo que eu realmente possa mover o mouse e clicar na dica de ferramenta antes que ela desapareça. O texto aparece formatado como um hiperlink na dica de ferramenta, mas clicar nele não consegue nada (a página de destino não abre). Estou faltando alguma coisa? Sim. Eu acho que estamos faltando alguma coisa. Tenho a sensação de que, ao utilizar um evento de mouse como um gatilho, então, ligamos a ação do mouse à dica de ferramenta, de modo que, enquanto o hiperlink aparecer, o mouse ainda está vinculado ao objeto de origem e ignora o link. Minha experiência nesta área é tristemente falta de medo. É o meu melhor palpite. Se for necessário 39 para sua visualização, faça uma pergunta sobre troca de pilha. Há um monte de pessoas nesse fórum com algumas habilidades raras. Pude não poder ajudar mais. Boa pergunta. O segredo é envolver a parte do texto que deseja vincular com uma tag (que pelo som que você já fez) e depois remover os eventos do ponteiro: nenhum atributo da seção de estilo (caso contrário, o mouse ignorará A presença da ponta da ferramenta). Eu gerei um exemplo no bl. ocks. org para sua leitura (bl. ocks. org/d3noob/c37cb8e630aaef7df30d). Mais uma vez, boa pergunta :-). Na verdade, também alterei a maneira como a ponta da ferramenta aparece e desaparece para que tenha mais chance de ficar na tela quando você move o mouse fora do ponto no gráfico. Ei, estou tentando criar um gráfico de dispersão simples com dicas de ferramentas. Meu arquivo csv é país, x, y, eu só quero que o nome do país (ampx, y) apareça para rotular cada ponto de dados ao longo do mouse (há 200 agrupados em torno de uma origem, por isso é um pouco desarrumado para criar). Problema simples, procurando solução simples Hmm. Diretamente, meu primeiro pensamento é massagear os dados antes de desenhar o gráfico. Isso pode ser feito de forma dinâmica usando um script php que carregou o csv, massagens e saídas como JSON (ou csv novamente). Não é totalmente simples no entanto (se você não está familiarizado com o php). Tenho a sensação de que haverá um método disponível nas funções da matriz d339s (github / mbostock / d3 / wiki / Arrays ou esta página pode ajudar bl. ocks. org/phoebebright/raw/3176159/). Mas sinto muito por dizer que eu Não os usamos seriamente. Se você pode juntar um exemplo no bl. ocks. org para que as pessoas comentem sobre uma pergunta subsequente sobre o excesso de pilha podem induzir uma resposta. Boa pergunta. TY para as instruções. Posso pedir conselhos No mouseover, meu código não mantém o URL em exibição ao mover o cursor para o URL. O URL é clicável, mas desaparece quando movendo eu movo o cursor. Tentou durações diferentes, mas não obteve os mesmos resultados mostrados no seu exemplo de gráfico. Aqui está um gist gist. github / gigster99 / 63e28838793dcc498339 que também inclui um link para o caso de teste (parte inferior). Como devo atualizar o código para obter os mesmos resultados mostrados no gráfico Ahh. Boa pergunta e desculpe pela demora inexcusável em responder. No seu caso (e o acima), o url desaparece porque quando o mouse desloca o objeto, ele tentará imediatamente a transição para longe. No entanto, você pode notar que existe um link adicional na publicação (que eu adicionei em 201) que liga a uma nova postagem mostrando como conseguir algo muito parecido com o que você está procurando por dnono. org/2014/05/including-html - link-in-d3js-tool-tip. html. Verifique isso e veja como você entra