Типси не будет распознавать элементы d3 в asp.net

Я пишу что-то ASP.NET и использую d3, чтобы построить график рассеяния, а затем навести курсор мыши.

Это вдохновлено этим примером.

Я значительно изменил свой график, поэтому он выглядит так: http://jsfiddle.net/scottieb/D9Vjg/

Но когда я помещаю этот код в ASP.NET, он не будет работать! Если я вставлю кнопку и привяжу к ней подсказку, у меня не возникнет проблем при создании всплывающей подсказки.

$('button').tipsy({
   html: false,
            live: true,
            fade: true,
            gravity: 'e',
            title: function () {
                return "test";
            }
        });

Для чего это стоит, вот код:

%@ 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>

ОБНОВИТЬ

Это становится страннее. В IE ничего не работает. В Firefox я получаю всплывающую подсказку, но по умолчанию она находится в левом верхнем углу экрана, а не рядом с кругами. К сожалению, я не могу получить хром в нашей машине разработчика.

Источник

2 ответа

По умолчанию главные страницы ASP.net обычно имеют более старый DOCTYPE. Удалите его и поместите HTML 5 тип документа <!DOCTYPE html>, Также убедитесь, что IE не настроен для отображения сайтов в режиме совместимости.

Источник

Это исключительно проблема браузера. Спасибо paxRoman за посадку этого семени. Я понимаю, что он работает безупречно в Chrome, незначительно в Firefox, а не в IE. Это, наверное, никого не шокирует.

Источник
Другие вопросы по тегам