Question

我正在尝试使用日期时间创建一个简单的折线图，其中X轴为5分钟，Y轴为一些数据，当显示图表时，数据将按预期显示，但它会在X轴上显示日期和时间。我只是想在一天间隔显示X轴上的日期，以及当用户在数据点上悬停时在图表内显示两者（日期和时间）。

我已经为＆＃34; XAxis＆＃34;提供了以下代码：选项部分内的属性：

<TextBox HorizontalContentAlignment="Center" Text="{Binding IpAddress, Mode=TwoWay}" ToolTip="Ip Address of camera">
                        <TextBox.Style>
                            <Style TargetType="TextBox" xmlns:sys="clr-namespace:System;assembly=mscorlib">
                                <Style.Resources>
                                    <VisualBrush x:Key="CueBannerBrush" AlignmentX="Center"  AlignmentY="Center" Stretch="None">
                                        <VisualBrush.Visual>
                                            <Label Content="Camera Ip Address" Foreground="Gray" Opacity="0.5" FontStyle="Italic" />
                                        </VisualBrush.Visual>
                                    </VisualBrush>
                                </Style.Resources>
                                <Style.Triggers>
                                    <Trigger Property="Text" Value="{x:Static sys:String.Empty}">
                                        <Setter Property="Background" Value="{StaticResource CueBannerBrush}" />
                                    </Trigger>
                                    <Trigger Property="Text" Value="{x:Null}">
                                        <Setter Property="Background" Value="{StaticResource CueBannerBrush}" />
                                    </Trigger>
                                    <Trigger Property="IsKeyboardFocused" Value="True">
                                        <Setter Property="Background" Value="White" />
                                    </Trigger>
                                </Style.Triggers>
                            </Style>
                        </TextBox.Style>
                    </TextBox>

请建议如何做到这一点。

Answer 1

通常你可以使用默认格式，它几乎适用于所有情况。但是，对于在您的情况下使用强制格式，请使用"%a %d"。

要显示工具提示，您不必向轴添加格式，您必须执行以下操作：

    someD3Elements.on("mouseover", function(d) {
    return tooltipElement.style("visibility", "visible")
      .text(function() {
        return d3.time.format('%a %b %e %H:%M:%S %Y')(new Date(d));
      });
  })
  .on("mousemove", function() {
    var event = d3.event;
    return tooltipElement.style("top", (event.pageY) + "px").style("left", event.pageX + 10 + "px");
  })
  .on("mouseout", function() {
    return tooltipElement.style("visibility", "hidden");
  })

其中someD3Elements可以是圈子和tooltipElement可以定义为：

tooltip = d3.select("#viewPort")
    .append("div")
    .style("position", "absolute")
    .style("z-index", "10")
    .style("visibility", "hidden")
    .text("");
}

当用户在d3图表上悬停时，在x轴和日期时间显示日期

1 个答案: