d3.js - Firefox cshtml 中的 D3.JS 条形图

问题描述

我正在尝试在 cshtml 中组合一个交互式条形图。好消息是它适用于除 Firefox 之外的所有浏览器。话虽这么说，我非常想知道为什么它在 Firefox 上失败，即使它甚至可以在 Internet Explorer 上运行。我的意思是来吧，互联网甚至不能在 Internet Explorer 上运行。

我在这里添加了我认为是相关的代码补丁：

function buildVisualization(dataSet) {           
            var barWidth = (chartWidth / dataSet.Items.length - 1) - 1;

            var bars = svg.selectAll("rect")
                          .data(dataSet.Items);

            // Build bars for each item
            // Example "rect" element: <rect x="200" y="400" width="300" height="100" style="" class="" />

            bars.enter()
               .append("rect")
                .attr("x", function (item, i) { return xScale(new Date(item.DateAsked)) } )
                .attr("y", function (item, i) { return chartHeight - yScale(item.Rate)})
                .attr("width", function (item) { return barWidth})
                .attr("height", function (item) { return yScale(item.Rate)})
               .attr("fill", "teal");

            bars.exit().remove();

            bars.transition()
                .attr("x", function (item, i) { return xScale(new Date(item.DateAsked))} )
                .attr("y", function (item, i) { return chartHeight - yScale(item.Rate)})
                .attr("width", function (item) { return barWidth})
                .attr("height", function (item) { return yScale(item.Rate)})
                .attr("fill", "teal");            
        }

话虽如此，如果需要，我可以提供所需的任何信息。

我应该指出，当运行图表本身时，它被放置在正确的位置，但是条形图（条形图的一个重要部分）都被推到左边并堆叠在一起，尽管它们在不同的选项时会改变高度被选中，因此定位似乎有问题，而不是它们的创建方式有问题。任何建议都会非常受欢迎。

整个片段：

@{
    ViewBag.Title = "Bar Chart";
    var choices = new List<SelectListItem>
    (){
new SelectListItem(){Text= "C#", Value="c#", Selected=true },
new SelectListItem(){Text= ".Net", Value=".net" },
new SelectListItem(){Text= "ASP.Net", Value="asp.net" },
new SelectListItem(){Text= "ASP.Net MVC", Value="asp.net-mvc" },
new SelectListItem(){Text= "C", Value="c" },
new SelectListItem(){Text= "C++", Value="c++" },
new SelectListItem(){Text= "JavaScript", Value="javascript" },
new SelectListItem(){Text= "Objective C", Value="objective-c" },
new SelectListItem(){Text= "PHP", Value="php" },
new SelectListItem(){Text= "Ruby", Value="ruby" },
new SelectListItem(){Text= "Python", Value="python" }
};
}
<style type="text/css">

    svg g.axis {
        font-size: .75em;
        font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    }

        svg g.axis text.label {
            font-size: 2em;
            font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
        }

        svg g.axis path,
        svg g.axis line {
            fill: none;
            stroke: black;
            shape-rendering: crispEdges;
        }
</style>
<h2>@ViewBag.Title</h2>
<div class="row">
    <div class="col-md-8">
        <p>This demo takes tag information from <a href="http://data.stackexchange.com/stackoverflow/queries">data.stackexchange.com</a> and projects it below.</p>
    </div>
</div>
<div class="row">
    <div class="col-md-4">
        @Html.Label("TagChoice", "Tag")
        @Html.DropDownList("TagChoice", choices)
    </div>
</div>
<div class="row">
    <div id="chartContainer">
    </div>
</div>
@Scripts.Render("~/bundles/d3")
@section Scripts{
    <script type="text/javascript">
        $(document).ready(function () {
            $("#TagChoice").on("change", function () {
                var tag = $(this).val();
                var url = "/api/tags?tag=";
                url += encodeURIComponent(tag);

                $.getJSON(url, function (data) {
                    buildVisualization(data);
                });
            });

            $("#TagChoice").change();
        });

        // Overall dimensions of the SVG
        var height = 400;
        var width = 900;

        // Padding...
        var leftPadding = 75;
        var bottomPadding = 50;

        // Actual space for the bars
        var chartWidth = width - leftPadding;
        var chartHeight = height - bottomPadding;

        //Building the scale for the heights
        var yScale = d3.scale
            .linear()
            .range([0, chartHeight])
            .domain([0, 21000]);

        var yAxisScale = d3.scale
            .linear()
            .range([chartHeight, 0])
            .domain([0, 21000]);

        //Building the scale for the bar locations
        var xScale = d3.time.scale()
            .domain([new Date("5-1-2008"), new Date("2-1-2014")])
            .range([leftPadding, width - 10]);

        //Building a Y axis
        var yAxis = d3.svg.axis()
            .scale(yAxisScale)
            .orient("left");

        // Building an X Axis
        var xAxis = d3.svg.axis()
            .scale(xScale)
            .orient("bottom")
            .tickFormat(d3.time.format("%m/%d/%Y"));

        // Build the overall SVG container
        var svg = d3.select("#chartContainer")
            .append("svg")
            .attr("width", width)
            .attr("height", height)
            .attr("class", "chart");

        // Adding the Axes
        svg.append("g")
            .attr("class", "axis")
            .attr("transform", "translate(" + leftPadding + ",0)")
            .call(yAxis)
            .append("text")
            .attr("transform", "rotate(-90)")
            .attr("dy", "-55px")
            .attr("dx", "-50px")
            .attr("class", "label")
            .style("text-anchor", "end")
            .text("Number of Questions Asked");


        svg.append("g")
            .attr("class", "axis")
            .attr("transform", "translate(0," + chartHeight + ")")
            .call(xAxis)
            .append("text")
            .attr("dy", "40px")
            .attr("dx", "475px")
            .attr("class", "label")
            .style("text-anchor", "end")
            .text("Month Asked");


        function buildVisualization(dataSet) {
            var barWidth = (chartWidth / dataSet.Items.length - 1) - 1;

            var bars = svg.selectAll("rect")
                .data(dataSet.Items);

            // Build bars for each item
            // Example "rect" element: <rect x="200" y="400" width="300" height="100" style="" class="" />

            bars.enter()
                .append("rect")
                .attr("x", function (item, i) { return xScale(new Date(item.DateAsked)) })
                .attr("y", function (item, i) { return chartHeight - yScale(item.Rate) })
                .attr("width", function (item) { return barWidth })
                .attr("height", function (item) { return yScale(item.Rate) })
                .attr("fill", "teal");

            bars.exit().remove();

            bars.transition()
                .attr("x", function (item, i) { return xScale(new Date(item.DateAsked)) })
                .attr("y", function (item, i) { return chartHeight - yScale(item.Rate) })
                .attr("width", function (item) { return barWidth })
                .attr("height", function (item) { return yScale(item.Rate) })
                .attr("fill", "teal");
        }
    </script>
}

标签： d3.jsrazorbar-chart

d3.js - Firefox cshtml 中的 D3.JS 条形图

问题描述

解决方案

推荐阅读