New Knowledge Log – 06

Interpolated Strings

It’s a C# 6 feature that helps build strings more easily. Every part of code that is enclosed within curly braces {} will be replaced with result of calling on it .ToString() method.

$"_search-analytics-{startDate:yyyy-MM-dd}.log"

Interpolated strings may be used with verbatim @ syntax. $ must appear before the @ token.

For more details: LINK

Using D3 axis without reference to the view

If I wanted to append D3 axis in a standard way, I would have to know in the method precise element selector where this axis should be displayed.

d3.select('#axis-container').call(xAxis);

Since that magic string makes code less maintainable and reusable, I decided to make it following way:

var holder = document.createElement('g');
d3.select(holder).call(xAxis.tickValues(dates));

return holder.innerHTML;

In the example above, first I create a fictional element, on which I call axis function. Then I return content of the element holder . Because the code above is part of a function that updates ko.observable, which is binded with html keyword it updates the dom with axis I want.

jQuery attr calls tolowercase on attribute’s name

I wanted to apply viewBox and preserveAspectRatio attributes to SVG element in my DOM from Javascript script that sets initial attributes to several DOM elements. To select proper element I used jQuery selector. What appeared later is that

svg.attr('viewBox', "0 0 " + width + " " + height);
svg.attr('preserveAspectRatio', 'xMinYMin meet');

resulted in adding attributes written with lowercase. This unfortunately left elements unaffected and unaware of their attributes as they had to be written in camel case. To solve this, I simply used normal JS selector getElementById and then used setAttribute method:

svg.setAttribute('viewBox', "0 0 " + width + " " + height);
svg.setAttribute('preserveAspectRatio', 'xMinYMin meet');

Making SVG scale up to changing size of window

To make SVG preserve it’s ratio and visual while resizing window, you need to apply two attributes to the element:

<svg viewBox="0 0 1133.5 283" preserveAspectRatio="xMinYMin meet">

viewPort:
First two arguments are x and y parameters that set the coordinates of top left corner. If you specify them as negative values, you will sneak outside of the viewport and in this case, you will create a blank margin around graph.

Quoting one of the authors from source below (HERE):

I like to visualize the SVG canvas with a viewBox the same way as Google maps. You can zoom in to a specific region or area in Google maps; that area will be the only area visible, scaled up, inside the viewport of the browser. However, you know that the rest of the map is still there, but it’s not visible because it extends beyond the boundaries of the viewport—it’s being clipped out.

Second two arguments define width and height. Again, I couldn’t put it better than I found in other blog:

  • It specifies a specific region of the canvas spanning from a top left point at (0, 0) to a point at (400, 300).
  • The SVG graphic is then cropped to that region.
  • The region is scaled up (in a zoom-in-like effect) to fill the entire viewport.
  • The user coordinate system is mapped to the viewport coordinate system so that—in this case—one user unit is equal to two viewport units.

Well put and described details can be found HERE and HERE

No Comments

Post a Comment