Question

您好我需要帮助在仪表内添加灰色（次要和主要）刻度线，以更准确地捕捉针的位置。此外，如果你有任何想法我们如何将文本放到主要毕业线。

对于我的样本，我需要7个主要毕业线除以10个小分离（看起来与Telerik Gauge完全相同）。

<html>
<head runat="server">
    <title></title>
</head>
<body>
    <div>
        <a id="myTooltip" title="This is my message"></a>
        <div id="svgTarget"></div>
    </div>
        <script>
        $(function () {

            var gaugeRanges = [
                {
                    From: 1.5,
                    To: 2.5,
                    Color: "#8dcb2a"
                }, {
                    From: 2.5,
                    To: 3.5,
                    Color: "#ffc700"
                }, {
                    From: 3.5,
                    To: 4.5,
                    Color: "#ff7a00"
                },
                {
                    From: 4.5,
                    To: 6,
                    Color: "#c20000"
                }];

            $("#svgTarget").mttD3Gauge({ data: gaugeRanges });

        });
    </script>
</body>
</html>
(function ($) {
    $.fn.mttD3Gauge = function (options) {
        var settings = $.extend({
            width: 300,
            innerRadius: 130,
            outterRadius: 145,
            data: []
        }, options);

        this.create = function () {
            this.html("<svg class='mtt-svgClock' width='" + settings.width + "' height='" + settings.width + "'></svg>");
            var maxLimit = 0;
            var minLimit = 9999999;
            var d3DataSource = [];
            var d3TickSource = [];
            //Data Genration
            $.each(settings.data, function (index, value) {
                d3DataSource.push([value.From, value.To, value.Color]);
                if (value.To > maxLimit) maxLimit = value.To;
                if (value.From < minLimit) minLimit = value.From;
            });

            if (minLimit > 0) {
                d3DataSource.push([0, minLimit, "#d7d7d7"]);
            }

            var pi = Math.PI;

            //Control Genration
            var vis = d3.select(this.selector + " .mtt-svgClock");
            var translate = "translate(" + settings.width / 2 + "," + settings.width / 2 + ")";
            var cScale = d3.scale.linear().domain([0, maxLimit]).range([-120 * (pi / 180), 120 * (pi / 180)]);
            var arc = d3.svg.arc()
                .innerRadius(settings.innerRadius)
                .outerRadius(settings.outterRadius)
                .startAngle(function (d) { return cScale(d[0]); })
                .endAngle(function (d) { return cScale(d[1]); });



            var tickArc = d3.svg.arc()
                .innerRadius(settings.innerRadius - 20)
                .outerRadius(settings.innerRadius - 2)
                .startAngle(function (d) { return cScale(d[0]); })
                .endAngle(function (d) { return cScale(d[1]); });

            for (var i = 0; i < 10; i++) {
                var point = (i * maxLimit) / 10.0;
                d3TickSource.push([point, point +1, "#d7d7d7"]);
            }

            vis.selectAll("path")
                .data(d3DataSource)
                .enter()
                .append("path")
                .attr("d", arc)
                .style("fill", function (d) { return d[2]; })
                .attr("transform", translate);

            return this;
        };

        return this.create();
    };

}(jQuery));

enter code here

这是我想要用D3.js实现的页面的链接 http://demos.telerik.com/aspnet-ajax/gauge/examples/types/radialgauge/defaultcs.aspx?#qsf-demo-source

任何帮助将不胜感激！

Answer 1

我终于找到了添加毕业的方法，随意使用此代码

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="Scripts/jquery-1.9.1.js"></script>
    <script src="Scripts/html5shiv.js"></script>
    <script src="Scripts/d3.v3.min.js"></script>
    <script src="Scripts/mtt-D3Gauge.js"></script>
</head>

<body>
    <div>
        <a id="myTooltip" title="This is my message"></a>
        <div id="svgTarget"></div>

    </div>
    <script>
        $(function () {

            var gaugeRanges = [
                {
                    From: 1.5,
                    To: 2.5,
                    Color: "#8dcb2a"
                }, {
                    From: 2.5,
                    To: 3.5,
                    Color: "#ffc700"
                }, {
                    From: 3.5,
                    To: 4.5,
                    Color: "#ff7a00"
                },
                {
                    From: 4.5,
                    To: 6,
                    Color: "#c20000"
                }];

            $("#svgTarget").mttD3Gauge({ data: gaugeRanges });

        });


    </script>
</body>
</html>

(function ($) {
    $.fn.mttD3Gauge = function (options) {
        var vis;

        var settings = $.extend({
            width: 300,
            innerRadius: 130,
            outterRadius: 145,
            majorGraduations: 6,
            minorGraduations: 10,
            majorGraduationLenght: 16,
            minorGraduationLenght: 10,
            majorGraduationMarginTop: 7,
            majorGraduationColor: "rgb(234,234,234)",
            minorGraduationColor:"rgb(234,234,234)",
            data: []
        }, options);

        this.create = function () {
            this.html("<svg class='mtt-svgClock' width='" + settings.width + "' height='" + settings.width + "'></svg>");
            var maxLimit = 0;
            var minLimit = 9999999;
            var d3DataSource = [];

            //Data Genration
            $.each(settings.data, function (index, value) {
                d3DataSource.push([value.From, value.To, value.Color]);
                if (value.To > maxLimit) maxLimit = value.To;
                if (value.From < minLimit) minLimit = value.From;
            });

            if (minLimit > 0) {
                d3DataSource.push([0, minLimit, "#d7d7d7"]);
            }
            //Render Gauge Color Area
            vis = d3.select(this.selector + " .mtt-svgClock");
            var translate = "translate(" + settings.width / 2 + "," + settings.width / 2 + ")";
            var cScale = d3.scale.linear().domain([0, maxLimit]).range([-120 * (Math.PI / 180), 120 * (Math.PI / 180)]);
            var arc = d3.svg.arc()
                .innerRadius(settings.innerRadius)
                .outerRadius(settings.outterRadius)
                .startAngle(function (d) { return cScale(d[0]); })
                .endAngle(function (d) { return cScale(d[1]); });
            vis.selectAll("path")
                .data(d3DataSource)
                .enter()
                .append("path")
                .attr("d", arc)
                .style("fill", function (d) { return d[2]; })
                .attr("transform", translate);

            renderMajorGraduations();

            return this;
        };

        var renderMinorGraduations = function (majorGraduationsAngles, indexMajor) {
            var graduationsAngles = [];

            if (indexMajor > 0) {
                var minScale = majorGraduationsAngles[indexMajor - 1];
                var maxScale = majorGraduationsAngles[indexMajor];
                var scaleRange = maxScale - minScale;

                for (var i = 1; i < settings.minorGraduations; i++) {
                    var scaleValue = minScale + i * scaleRange / settings.minorGraduations;
                    graduationsAngles.push(scaleValue);
                }

                var xCenter = settings.width / 2;
                var yCenter = settings.width / 2;
                //Render Minor Graduations
                $.each(graduationsAngles, function (indexMinor, value) {
                    var cos1Adj = Math.round(Math.cos((90 - value) * Math.PI / 180) * (settings.innerRadius - settings.majorGraduationMarginTop - settings.minorGraduationLenght));
                    var sin1Adj = Math.round(Math.sin((90 - value) * Math.PI / 180) * (settings.innerRadius - settings.majorGraduationMarginTop - settings.minorGraduationLenght));
                    var cos2Adj = Math.round(Math.cos((90 - value) * Math.PI / 180) * (settings.innerRadius - settings.majorGraduationMarginTop));
                    var sin2Adj = Math.round(Math.sin((90 - value) * Math.PI / 180) * (settings.innerRadius - settings.majorGraduationMarginTop));
                    var x1 = xCenter + cos1Adj;
                    var y1 = yCenter + sin1Adj * -1;
                    var x2 = xCenter + cos2Adj;
                    var y2 = yCenter + sin2Adj * -1;
                    vis.append("svg:line")
                    .attr("x1", x1)
                    .attr("y1", y1)
                    .attr("x2", x2)
                    .attr("y2", y2)
                    .style("stroke", settings.majorGraduationColor);
                });
            }
        };

        var renderMajorGraduations = function () {
            var scaleRange = 240;
            var minScale = -120;
            var graduationsAngles = [];
            for (var i = 0; i <= settings.majorGraduations; i++) {
                var scaleValue = minScale + i * scaleRange / settings.majorGraduations;
                graduationsAngles.push(scaleValue);
            }
            var xCenter = settings.width / 2;
            var yCenter = settings.width / 2;
            //Render Major Graduations
            $.each(graduationsAngles, function (index, value) {
                var cos1Adj = Math.round(Math.cos((90 - value) * Math.PI / 180) * (settings.innerRadius - settings.majorGraduationMarginTop - settings.majorGraduationLenght));
                var sin1Adj = Math.round(Math.sin((90 - value) * Math.PI / 180) * (settings.innerRadius - settings.majorGraduationMarginTop - settings.majorGraduationLenght));
                var cos2Adj = Math.round(Math.cos((90 - value) * Math.PI / 180) * (settings.innerRadius - settings.majorGraduationMarginTop));
                var sin2Adj = Math.round(Math.sin((90 - value) * Math.PI / 180) * (settings.innerRadius - settings.majorGraduationMarginTop));
                var x1 = xCenter + cos1Adj;
                var y1 = yCenter + sin1Adj * -1;
                var x2 = xCenter + cos2Adj;
                var y2 = yCenter + sin2Adj * -1;
                vis.append("svg:line")
                .attr("x1", x1)
                .attr("y1", y1)
                .attr("x2", x2)
                .attr("y2", y2)
                .style("stroke", settings.majorGraduationColor);
                renderMinorGraduations(graduationsAngles, index);
            });
        };

        return this.create();
    };

}(jQuery));

D3.js Gauge看起来像Telerik Radial Gauge

1 个答案: