Skip to content

Instantly share code, notes, and snippets.

@dimitardanailov
Last active Mar 15, 2017
Embed
What would you like to do?
D3.js Path Data Generator Line Example
license: gpl-3.0
<!DOCTYPE html>
<meta charset="utf-8">
<style type="text/css">
svg {
font-family: "Helvetica Neue", Helvetica;
}
.line {
fill: none;
stroke: #000;
stroke-width: 2px;
}
</style>
<body>
<script src="//d3js.org/d3.v3.min.js"></script>
<script>
var width = 400;
var height = 400;
var svg = d3.select('body').append('svg');
svg.attr('width', width);
svg.attr('height', height);
//This is the accessor function we talked about above
var lineFunction = d3.svg.line()
.x(function(d) { return d.x; })
.y(function(d) { return d.y; })
.interpolate('linear');
//The data for our line
var lineData = [
{ "x": 1, "y": 5},
{ "x": 20, "y": 20},
{ "x": 40, "y": 10},
{ "x": 60, "y": 40},
{ "x": 80, "y": 5},
{ "x": 100, "y": 60}
];
//The line SVG Path we draw
var lineGraph = svg.append("path")
.attr("d", lineFunction(lineData))
.attr("stroke", "blue")
.attr("stroke-width", 2)
.attr("fill", "none");
</script>
@adnredwan77

This comment has been minimized.

Copy link

@adnredwan77 adnredwan77 commented Mar 15, 2017

I'm trying to use this example in asp.net core 1.1 project. but it does not work.
I'm wondering are their any limitations to use d3.js with asp.net core 1.1 and visual studio RC?

her the example at Razor page

<path d=" M 10 25
        L 10 75
        L 60 75
        L 10 25"
       stroke="red" stroke-width="2" fill="none" />

@section Scripts {
<script src="~/lib/d3/d3.min.js"></script>
<script type="text/javascript">
var lineData = [{ "x": 100, "y": 50 }, { "x": 200, "y": 50 },
{ "x": 180, "y": 70 }, { "x": 160, "y": 70 },
{ "x": 100, "y": 50 }];

var lineFunction = d3.svg.line()
                         .x(function (d) { return d.x; })
                         .y(function (d) { return d.y; }).interpolate("linear");
var svgContainer = d3.selectAll("body")
                        .append("svg")
                        .attr("width", 200)
                        .attr("height", 200);
var lineGraph = svgContainer.append("path")
                            .attr("d", lineFunction(lineData))
                            .attr("stroke", "blue")
                            .attr("fill", "none");
</script>

}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment