Skip to content

Instantly share code, notes, and snippets.

@dimitardanailov

dimitardanailov/.block

Last active March 15, 2017 12:48
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save dimitardanailov/6f0a451d4457b9fa7bf6e0dddcd0f468 to your computer and use it in GitHub Desktop.
Save dimitardanailov/6f0a451d4457b9fa7bf6e0dddcd0f468 to your computer and use it in GitHub Desktop.
Download ZIP
D3.js Path Data Generator Line Example
Raw
.block
license: gpl-3.0
Raw
README.md
Raw
index.html
<!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
Copy link

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