D3圆滑鼠悬停

时间:2018-07-04 02:28:25

标签: d3.js tooltip mouseover

尝试将鼠标悬停作为工具提示的一部分来突出显示特定的圆圈。当我将鼠标悬停在任何一个圆圈上时,都可以突出显示所有圆圈,但无法弄清楚如何仅将鼠标悬停在其中。 circle.transition()会全部选中它们,我可以在这里替换一下吗?

if(!circles){
            cellGroup = g.append("g")
                .attr("class", "cells")
                .selectAll("g")
                    .data(d3.voronoi()
                    .extent([[-margin.left, -margin.top], [width + margin.right, height + margin.top]])
                    .x(function(d) { return d.x; })
                    .y(function(d) { return d.y; })
                .polygons(MyData))

cell = cellGroup.enter().append("g").attr("class", "cell");    
circles = cell.append("circle")
                    .attr("r", 0)
                    .attr("cx", function(d) { return d.data.x; })
                    .attr("cy", 0)
                    .attr("class", "swarm-circle")
                    .style("fill", "#D4D4D4"  )
                    .on("mouseover", function(d) {
                        circles.transition()    // trying to highlight the circle that the tooltip relates to
                            .delay(0)
                            .duration(500)
                            .style("stroke", "pink")
                            .style("stroke-width", 5);

1 个答案:

答案 0 :(得分:1)

您可以使用select(this),例如:

public sealed partial class MainPage : Page
{
    public MainPage()
    {
        this.InitializeComponent();
    }
    bool replaceButtonClicked, replaceCustomButtonClicked, replaceTileButtonClicked;

    private void replace_Click(object sender, RoutedEventArgs e)
    {
        replaceButtonClicked = true;
        disappearStoryboard.Begin();
    }

    private void replaceCustom_Click(object sender, RoutedEventArgs e)
    {
        replaceCustomButtonClicked = true;
        disappearStoryboard.Begin();
    }

    private void replaceTile_Click(object sender, RoutedEventArgs e)
    {
        replaceTileButtonClicked = true;
        disappearStoryboard.Begin();
    }

    private void disappearStoryboard_Completed(object sender, object e)
    {
        if (replaceButtonClicked)
        {
            image1.Source = new BitmapImage(new Uri("ms-appx:///Assets/OSM200.png",
         UriKind.RelativeOrAbsolute));
            image2.Source = new BitmapImage(new Uri("ms-appx:///Assets/OSM201.png",
              UriKind.RelativeOrAbsolute));
            image3.Source = new BitmapImage(new Uri("ms-appx:///Assets/OSM202.png",
              UriKind.RelativeOrAbsolute));
            image4.Source = new BitmapImage(new Uri("ms-appx:///Assets/OSM203.png",
              UriKind.RelativeOrAbsolute));
            image5.Source = new BitmapImage(new Uri("ms-appx:///Assets/OSM210.png",
              UriKind.RelativeOrAbsolute));
            image6.Source = new BitmapImage(new Uri("ms-appx:///Assets/OSM211.png",
              UriKind.RelativeOrAbsolute));
            image7.Source = new BitmapImage(new Uri("ms-appx:///Assets/OSM212.png",
              UriKind.RelativeOrAbsolute));
            image8.Source = new BitmapImage(new Uri("ms-appx:///Assets/OSM213.png",
              UriKind.RelativeOrAbsolute));
            image9.Source = new BitmapImage(new Uri("ms-appx:///Assets/OSM220.png",
              UriKind.RelativeOrAbsolute));
            image10.Source = new BitmapImage(new Uri("ms-appx:///Assets/OSM221.png",
              UriKind.RelativeOrAbsolute));
            image11.Source = new BitmapImage(new Uri("ms-appx:///Assets/OSM222.png",
              UriKind.RelativeOrAbsolute));
            image12.Source = new BitmapImage(new Uri("ms-appx:///Assets/OSM223.png",
              UriKind.RelativeOrAbsolute));
            replaceButtonClicked = false;
        }
        if (replaceCustomButtonClicked)
        {
            image1.Source = new BitmapImage(new Uri("ms-appx:///Assets/custom200.png",
         UriKind.RelativeOrAbsolute));
            image2.Source = new BitmapImage(new Uri("ms-appx:///Assets/custom201.png",
              UriKind.RelativeOrAbsolute));
            image3.Source = new BitmapImage(new Uri("ms-appx:///Assets/custom202.png",
              UriKind.RelativeOrAbsolute));
            image4.Source = new BitmapImage(new Uri("ms-appx:///Assets/custom203.png",
              UriKind.RelativeOrAbsolute));
            image5.Source = new BitmapImage(new Uri("ms-appx:///Assets/custom210.png",
              UriKind.RelativeOrAbsolute));
            image6.Source = new BitmapImage(new Uri("ms-appx:///Assets/custom211.png",
              UriKind.RelativeOrAbsolute));
            image7.Source = new BitmapImage(new Uri("ms-appx:///Assets/custom212.png",
              UriKind.RelativeOrAbsolute));
            image8.Source = new BitmapImage(new Uri("ms-appx:///Assets/custom213.png",
              UriKind.RelativeOrAbsolute));
            image9.Source = new BitmapImage(new Uri("ms-appx:///Assets/custom220.png",
              UriKind.RelativeOrAbsolute));
            image10.Source = new BitmapImage(new Uri("ms-appx:///Assets/custom221.png",
              UriKind.RelativeOrAbsolute));
            image11.Source = new BitmapImage(new Uri("ms-appx:///Assets/custom222.png",
              UriKind.RelativeOrAbsolute));
            image12.Source = new BitmapImage(new Uri("ms-appx:///Assets/custom223.png",
              UriKind.RelativeOrAbsolute));
            replaceCustomButtonClicked = false;
        }
        if (replaceTileButtonClicked)
        {
            image1.Source = new BitmapImage(new Uri("ms-appx:///Assets/OSM300.png",
         UriKind.RelativeOrAbsolute));
            image2.Source = new BitmapImage(new Uri("ms-appx:///Assets/OSM301.png",
              UriKind.RelativeOrAbsolute));
            image3.Source = new BitmapImage(new Uri("ms-appx:///Assets/OSM302.png",
              UriKind.RelativeOrAbsolute));
            image4.Source = new BitmapImage(new Uri("ms-appx:///Assets/OSM303.png",
              UriKind.RelativeOrAbsolute));
            image5.Source = new BitmapImage(new Uri("ms-appx:///Assets/OSM304.png",
              UriKind.RelativeOrAbsolute));
            image6.Source = new BitmapImage(new Uri("ms-appx:///Assets/OSM305.png",
              UriKind.RelativeOrAbsolute));
            image7.Source = new BitmapImage(new Uri("ms-appx:///Assets/OSM306.png",
              UriKind.RelativeOrAbsolute));
            image8.Source = new BitmapImage(new Uri("ms-appx:///Assets/OSM301.png",
              UriKind.RelativeOrAbsolute));
            image9.Source = new BitmapImage(new Uri("ms-appx:///Assets/OSM302.png",
              UriKind.RelativeOrAbsolute));
            image10.Source = new BitmapImage(new Uri("ms-appx:///Assets/OSM303.png",
              UriKind.RelativeOrAbsolute));
            image11.Source = new BitmapImage(new Uri("ms-appx:///Assets/OSM310.png",
              UriKind.RelativeOrAbsolute));
            image12.Source = new BitmapImage(new Uri("ms-appx:///Assets/OSM311.png",
              UriKind.RelativeOrAbsolute));
            replaceTileButtonClicked = false;
        }
        displayStoryboard.Begin();
    }

}