Tipsy不会识别d32元素在asp.net [英] Tipsy won't recognize d3 elements in asp.net
问题描述
我写了一些东西ASP.NET和使用d3来绘制散点图，然后小心做鼠标移动。
I am writing something ASP.NET and using d3 to graph a scatter plot, then tipsy to do mouseovers.
这是受到这个示例。
我已经大大降低了我的图形，所以它只是this： http://jsfiddle.net/scottieb/D9Vjg/
I have dumbed down my graph considerably so it is just this: http://jsfiddle.net/scottieb/D9Vjg/
但是当我把代码在ASP.NET它不会工作！
But when I put that code in ASP.NET it won't work! If I put a button in and tie tipsy to that instead I have no issue generating the tooltip.
$('button').tipsy({
html: false,
live: true,
fade: true,
gravity: 'e',
title: function () {
return "test";
}
});
对于它的价值，这里是代码：
For what it's worth, here's the code:
%@ Page Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="Reports_test.aspx.cs"
Inherits="Pricing.App.Web.Reports_test" %
asp:content id="bodyContent" contentplaceholderid="Body" runat="server">
<script type="text/javascript" src="http://mbostock.github.com/d3/d3.js"></script>
<script type="text/javascript" src="http://onehackoranother.com/projects/jquery/tipsy/javascripts/jquery.tipsy.js"></script>
<div id="slidegraph"></div>
<script type="text/javascript">
//$(function () {
//var x_data = [1, 1.2, 1.4, 1.6, 1.8];
var x_data = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
var y_data = [2, 4, 6, 7, 8, 9, 10, 12, 14, 15, 19, 20];
var r_data = [5, 5, 5, 5, 10, 10, 10, 10, 4, 4];
var c_data = [1, 1, 1, 1, 1, 2, 2, 2, 2, 2];
var ipg_data = ['MUSTARD', 'MUSTARD', 'MUSTARD', 'MUSTARD', 'MUSTARD', 'MUSTARD', 'MUSTARD', 'MUSTARD', 'MUSTARD', 'MUSTARD'];
var srp_data = [2, 4, 6, 7, 8, 9, 10, 12, 14, 15, 19, 20];
var old_data = [2, 4, 6, 7, 8, 9, 10, 12, 14, 15, 19, 20];
var data = [];
for (i = 0; i < x_data.length; i++) {
data.push({ "x": x_data[i], "y": y_data[i], "c": c_data[i], "r": r_data[i]
, "ipg": ipg_data[i], "srp": srp_data[i], "old": old_data[i]
});
}
var h = 400;
var w = 400;
var margin = 40;
var x = d3.scale.linear().domain([0, 10]).range([0 + margin, w - margin]),
y = d3.scale.linear().domain([20, 0]).range([0 + margin, h - margin]),
r = d3.scale.linear().domain([0, 10]).range([3, 20]),
c = d3.scale.ordinal().domain([1, 7]).range(["#FF0000", "#00FF00", "#0000FF"
, "#FFFF00", "#00FFFF", "#FF00FF", "#FFFFFF"]);
var vis = d3.select("#slidegraph")
.append("svg:svg")
.attr("width", w)
.attr("height", h);
vis.selectAll("circle").data(data).enter().append("svg:circle")
.attr("stroke", "black")
.attr("cx", function (d) {
return x(d.x);
}).attr("cy", function (d) {
return y(d.y);
}).attr("fill", "red").attr("r", 15)
;
$('svg circle').tipsy({
html: true,
//live: true,
//fade: true,
gravity: 'w',
title: function () {
alert("gotcha!");
return "test";
}
});
// });
</script>
/asp:content>
UPDATE
它得到weirder。在IE中，没有什么工作。在Firefox中，我得到工具提示，但它默认在屏幕的左上角，而不是在圈子旁边。很遗憾，我无法在我们的开发机器中使用chrome。
It gets weirder. In IE, nothing works. In Firefox I get the tooltip, but it defaults to the top left of the screen, not next to the circles. Sadly, I can't get chrome in our dev machine.
推荐答案
默认情况下，ASP.net母版页通常有一个旧的DOCTYPE 。删除它并将HTML 5 doc类型<！DOCTYPE html> 。此外，请确保未将IE设置为以兼容模式显示网站。
By default ASP.net master pages usually have a older DOCTYPE. Remove it and put the HTML 5 doc type <!DOCTYPE html>. Also, make sure IE is not setup to display sites in compatibility mode.
这篇关于Tipsy不会识别d32元素在asp.net的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
