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 no 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 bits e peças (o mais complicado de descobrir como formatar a data exibida corretamente e inserir uma quebra de linha na dica de ferramenta (Que eu encontrei aqui groups. google forum fromgroupstopic d3-js GgFTf24ltjc (bem feito para todos aqueles que participam dessa discussão)). Torno a suposição de que qualquer ou todos os erros que ocorrem na implementação serão meus, enquanto que quaisquer sucessos serão Seja para baixo para os contribuidores originais. Assim, 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 Os vi e os usei, mas suponho que todos nós tendemos a chamá-los de coisas diferentes, como informações, 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 O mouse tem Acima de um dos círculos da parcela de dispersão e apareceu uma dica que fornece ao usuário a data e o valor exatos 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 você quiser mudar um objeto, você pode fazer, basta especificar o ponto final do estilo do atributo que você deseja 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 sobre ferramentas. 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á em vigor para instruir o evento do mouse para passar pelo elemento e direcionar o que quer que esteja embaixo desse elemento em vez disso (Leia mais aqui developer. mozilla. org en-US docs CSS Ponteiro-eventos). 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 é um pouco mais simples na medida em que não precisa fazer nenhum elemento de coordenadas html de texto extravagante. Tudo o que precisa fazer é desvanecer o elemento div. E isso é feito simplesmente invando a opacidade de volta para 0 e definindo a duração Para a transição para 500 milissegundos (sendo um pouco mais longo 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. Mas espero que entre Explicação e o código de exemplo, você terá a ideia. Por favor, tome 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 a coisa. Eu coloquei Uma cópia do arquivo para desenhar as dicas de ferramentas na seção de downloads no d3noob. org com os exemplos gerais como tooltips. html. Editar: 2014-05-02: Depois de uma pergunta interessante abaixo adicionei uma nova postagem sobre como incluir um 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 criando-animações-e-transições-com-d3-js um de seus exemplos parece exatamente o que você descreve e eu vou tomar 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 é sim 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. Então, eu estou perguntando se podemos estar em uma situação de ovo de galinha onde podemos fazer um 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 gere 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) seja exibido para rotular cada ponto de dados ao longo do mouse (há 200 agrupados em torno de uma origem, por isso é um pouco desarrumado para explicar). 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 de matriz do d339s (github mbostock d3 wiki Arrays ou esta página pode ajudar bl. ocks. org phoebebright cru 3176159) mas sinto muito por dizer que eu não o usei 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 a caixa 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 d3noob. org 2014 05 including-html-link - In-d3js-tool-tip. html. Verifique isso e veja como você entra