How do I insert a d3 animation using the razor view engine? I have a layout and a render body section:
It uses d3 to create an SVG object on the 'body' but this does not render correctly in the body section of the page?????????
<body>
- @Html.ActionLink("Home", "Index", "Home")
- @Html.ActionLink("About", "About", "Home")
- @Html.ActionLink("Contact", "Contact", "Home")
@Html.Partial("_LoginPartial")
@RenderBody() //I would suspect the animation would be placed here?
© @DateTime.Now.Year - My ASP.NET Application
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/bootstrap")
@RenderSection("scripts", required: false)
</body>
I then have a page that uses a javascript file to run an animation:
@{
ViewBag.Title = "InsertionSort";
}
<head>
<meta charset="UTF-8">
<title>D3 insertion sort</title>
<link href="~/Content/AlgorithmStyles/insertioSort.css" rel="stylesheet" />
</head>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="~/Algorithms/Sorting/insertionsort.js"></script>
<h2>My Test</h2>
<h1></h1>
</body>
ar svg = d3.select('body')
.append('svg')
.attr('width', width)
.attr('height', height);
svg.selectAll('rect')
.data(dataset)
.enter()
.append('rect')
.attr('x', function (d, i) { return x(i); })
.attr('y', function (d) { return height - y(d); })
.attr('width', x.rangeBand())
.attr('height', function (d) { return y(d); })
.call(drag);