Quantcast
Channel: All Developer posts
Viewing all articles
Browse latest Browse all 48522

Please! Help me make my custom visual.

$
0
0

Guys! Help me please! I am trying and trying and trying. But I can not to do anything.

I had install develop environment. It's work. I had download this sampleBarChart.

I do everything like in tutorial and it's working.

2016-11-02 (1).png

 

 

 

 

 

 

 

 

 

 

 

 

 

And it's working in web.

2016-11-02 (2).PNG

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Cool! But I very need to custom it. And I don't know how to do this. I have the code of this visual.

Probably I will able to do this, but first I need to undestand how this code is working. Help me please to understand it. I very, very need it. I had called to microsoft technical support, but they didn't help me. They says that they don't support developing problems.

For example, I don't understand this part of code:

            if(settings.enableAxis.show) {
                let margins = BarChart.Config.margins;
                height -= margins.bottom;
            }

            this.xAxis.style({
                'font-size': d3.min([height, width]) * BarChart.Config.xAxisFontMultiplier,
            });

            let yScale = d3.scale.linear()
                .domain([0, viewModel.dataMax])
                .range([height, 0]);

            let xScale = d3.scale.ordinal()
                .domain(viewModel.dataPoints.map(d => d.category))
                .rangeRoundBands([0, width], BarChart.Config.xScalePadding, 0.2);

            let xAxis = d3.svg.axis()
                .scale(xScale)
                .orient('top');

            this.xAxis.attr('transform', 'translate(0, ' + height + ')')
                .call(xAxis);

            let bars = this.barContainer.selectAll('.bar').data(viewModel.dataPoints);
            bars.enter()
                .append('rect')
                .classed('bar', true);

            bars.attr({
                width: xScale.rangeBand(),
                height: d => height - yScale(<number>d.value),
                y: d => yScale(<number>d.value),
                x: d => xScale(d.category),
                fill: d => d.color,
                'fill-opacity': BarChart.Config.solidOpacity,
            });

What is it doing?

Thanks a lot in advance. I need your help!


Viewing all articles
Browse latest Browse all 48522

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>