score:0

Accepted answer

I made a terrible mistake. All the examples ive tried was written for d3.v4 libary, and as you can guess I used a d3.v3 libary... soo here's the code:

var Chart = (function(window,d3) {
var svg,div, data, xScale, yScale, xAxis, yAxis, dim, chartWrapper,parse, line,lineGen, colors,path,fh,fw, dots, margin = {}, width, height, locator,formatTime;
var wbreakPoint = 768;
var hbreakPoint = 200;
d3.json('data3.json', init); 
function init(json) {
    data = {
"Model": "Model A",
"Data": [{
        "city": "Datchik2",
        "Data": [{
                    "Date":"2017-08-11 15:10:34.363",
                    "Value":"0" 
                },{
                    "Date":"2017-08-12 21:12:34.363",
                    "Value":"32"
                },{
                    "Date":"2017-08-15 21:55:34.363",
                    "Value":"200"
                }]
        },{
        "city": "Rele1",
        "Data": [{
                    "Date":"2017-08-11 17:11:34.363",
                    "Value":"1"
                },{
                    "Date":"2017-08-15 18:11:34.363",
                    "Value":"1"
                },{
                    "Date":"2017-08-16 19:12:34.363",
                    "Value":"2"
                }]
        },{
        "city": "Datchik22",
        "Data": [{
                    "Date":"2017-08-12 21:10:34.363",
                    "Value":"10"
                },{
                    "Date":"2017-08-13 22:10:34.363",
                    "Value":"20"
                },{
                    "Date":"2017-08-14 23:10:34.363",
                    "Value":"30"
                }]
        }]};    
    colors = d3.scaleOrdinal(d3.schemeCategory10);
    parse = d3.timeParse("%Y-%m-%d %H:%M:%S.%L");
    xExtent = d3.extent(data.Data[0].Data, function(d,i) { return parse(d.Date) });
    yExtent = d3.extent(data.Data[0].Data, function(d,i) { return (d.Value) });
    x = d3.scaleTime().domain(xExtent);
    y = d3.scaleLinear().domain(yExtent);
    xAxis = d3.axisBottom(xScale);
    yAxis = d3.axisLeft(yScale);
    svg = d3.select('#chart').append('svg').style('pointer-events', 'none');        
    groups = svg.selectAll("foo").data(data.Data).enter().append("g");
    chartWrapper = groups.append('g').style('pointer-events', 'all');  
    lineGen = d3.line().x(d => x(parse(d.Date))).y(d => y(d.Value));
    path = chartWrapper.append('path').classed('line', true).attr("d", d => lineGen(d.Data));   
    chartWrapper.append('g').classed('x axis', true);
    chartWrapper.append('g').classed('y axis', true);       
    touchScale = d3.scaleLinear();  
    render();}
function render() {
    updateDimensions(window.innerWidth);   
    x.range([0, width]);
    y.range([height, 0]);
    touchScale.domain([0,width]).range([0,data.length-1]).clamp(true);
    svg.attr('width', '100%').attr('height', height + margin.top + margin.bottom);
    fh = svg.style("height").replace("px", "");
    fw = svg.style("width").replace("px", "");
    chartWrapper.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');    
    xAxis.scale(x);
    yAxis.scale(y);
    svg.select('.x.axis')
        .attr('transform', 'translate(0,' + height + ')')
        .transition()
        .duration(500)
        .delay(200)
        .call(xAxis)
        .selectAll("text")  
            .style("text-anchor", "end")
            .attr("dx", "-.8em")
            .attr("dy", ".15em")
            .attr("transform", "rotate(-50)" ); 
    svg.select('.y.axis')
        .transition()
        .duration(500)
        .delay(200)
        .call(yAxis);
    chartWrapper.select("text")
        .attr("x", (fw / 2))             
        .attr("y", 0 - (margin.top / 2))
        .attr("text-anchor", "middle");     
    path
        .transition()
        .duration(1000)
        .attr('d',  d => lineGen(d.Data))
        .attr("stroke-width", 3)
              .attr("fill", "none")
    .attr("stroke", (d, i) => colors(i));} 
function updateDimensions(winWidth) {
    margin.top = 40;
    margin.right = winWidth < wbreakPoint ? 50 : 80;
    margin.left = winWidth < wbreakPoint ? 0 : 50;
    margin.bottom = 80;
    width = winWidth - margin.left - margin.right;
    height = .1 * width;}
return {render : render}
})(window,d3);
window.addEventListener('resize', Chart.render);

As you can see I changed json file structure.Now its look like:

[
"Model": "Model A",
"Data": [{
        "city": "Datchik2",
        "Data": [{
                    "Date":"2017-08-11 21:10:34.363",
                    "Value":"15"    
                },{
                    "Date":"2017-08-12 21:12:34.363",
                    ....]
        },{
        ....]

Render function works well, but now i have a little problem with extent(xExtent and yExtent) and working with local file(in working project there is no local file, i use response string from server to put json directly in data variable). But i think i will find a solution. if this happens I can put the solution here. Thanks everybody for watching and editing question text! P.S.: Sorry for the huge amount of code strings and my English ;)


Related Query