How do I find out what doesn't work?

Yes, of course.

tsconfig.json:

{
  "compilerOptions": {
    "allowJs": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "target": "ES5",
    "sourceMap": true,
    "out": "./.tmp/build/barChart.js"
  },
  "files": [
    "node_modules/powerbi-visuals-utils-dataviewutils/lib/index.d.ts",
    "node_modules/powerbi-visuals-utils-typeutils/lib/index.d.ts",
    "node_modules/powerbi-visuals-utils-colorutils/lib/index.d.ts",
    ".api/v1.7.0/PowerBI-visuals.d.ts",
    "src/barChart.ts",
    "src/objectEnumerationUtility.ts",
    "src/colorPalette.ts"
  ]
}

pbiviz.json:

{
  "visual": {
    "name": "secondTry",
    "displayName": "secondTry",
    "guid": "secondTry907B5A8A17DF4B48A41E2DB3737B35D8",
    "visualClassName": "secondTry.ts",
    "version": "1.0.0",
    "description": "",
    "supportUrl": "",
    "gitHubUrl": ""
  },
  "apiVersion": "1.7.0",
  "author": {
    "name": "",
    "email": ""
  },
  "assets": {
    "icon": "assets/icon.png"
  },
  "externalJS": [
    "node_modules/powerbi-visuals-utils-dataviewutils/lib/index.js",
    "node_modules/powerbi-visuals-utils-typeutils/lib/index.js",
    "node_modules/powerbi-visuals-utils-colorutils/lib/index.js",
    "node_modules/d3/d3.min.js"
  ],
  "style": "style/visual.less",
  "capabilities": "capabilities.json",
  "dependencies": "dependencies.json",
  "stringResources": []
}

capabilities.json:

{
  "dataRoles": [
    {
      "displayName": "Category Data",
      "name": "category",
      "kind": "Grouping"
    },
    {
      "displayName": "Measure Data",
      "name": "measure",
      "kind": "Measure"
    }
  ],
  "dataViewMappings": [
    {
      "conditions": [
        {
          "category": {
            "max": 1
          },
          "measure": {
            "max": 1
          }
        }
      ],
      "categorical": {
        "categories": {
          "for": {
            "in": "category"
          }
        },
        "values": {
          "select": [
            {
              "bind": {
                "to": "measure"
              }
            }
          ]
        }
      }
    }
  ],
  "objects": {
    "enableAxis": {
      "displayName": "Enable Axis",
      "properties": {
        "show": {
          "displayName": "Enable Axis",
          "type": {
            "bool": true
          }
        }
      }
    },
    "colorSelector": {
      "displayName": "Data Colors",
      "properties": {
        "fill": {
          "displayName": "Color",
          "type": {
            "fill": {
              "solid": {
                "color": true
              }
            }
          }
        }
      }
    },
    "generalView": {
      "displayName": "General View",
      "properties": {
        "opacity": {
          "displayName": "Bars Opacity",
          "type": {
            "integer": true
          }
        }
      }
    }
  }
}

barChart.ts:

namespace powerbi.extensibility.visual {
  /**
   * Interface for barcharts viewmodel.
   * 
   * @interface
   * @property {barChartDataPoint[]} dataPoints - Set of datapoints
   * @property {number} dataMax                 - Highest data value in dataPoints
   * @property {BarChartSettings} settings      - Viewmodel settings (?)
   */
  interface BarChartViewModel {
    dataPoints: BarChartDataPoint[];
    dataMax: number;
    settings: BarChartSettings;
  }

  /**
   * A datapoint.
   * 
   * @interface
   * @property {PrimitiveValue} value     - Value for datapoint
   * @property {string} category          - Categorization of datapoint
   * @property {string} color             - Color of datapoint
   * @property {ISelectionId} selectionId - Id of the datapoint when selected.
   */
  interface BarChartDataPoint {
    value: PrimitiveValue;
    category: string;
    color: string;
    selectionId: ISelectionId;
  }

  /**
   * Settings of barchart
   * 
   * @interface
   * @property {object} enableAxis  - Has property "show" -> boolean
   * @property {object} generalView - Has property "opacity" -> number
   */
  interface BarChartSettings {
    enableAxis: {
      show: boolean;
    };

    generalView: {
      opacity: number;
    };
  }

  /**
     * Function that converts queried data into a view model that will be used by the visual.
     *
     * @function
     * @param {VisualUpdateOptions} options - Contains references to the size of the container
     *                                        and the dataView which contains all the data
     *                                        the visual had queried.
     * @param {IVisualHost} host            - Contains references to the host which contains services
     */
  function visualTransform(
    options: VisualUpdateOptions,
    host: IVisualHost
  ): BarChartViewModel {
    //Getting  colors
    let Colors = null; //changed for sharing

    //DataView object that contains all data needed to render visual (capabilities)
    let dataViews = options.dataViews;

    //Saving default settings in var
    let defaultSettings: BarChartSettings = {
      enableAxis: {
        show: false
      },
      generalView: {
        opacity: 100
      }
    };

    //Creating viewmodel
    let viewModel: BarChartViewModel = {
      dataPoints: [],
      dataMax: 0,
      settings: <BarChartSettings>{}
    };

    //Returning viewmodel if it's not empty
    if (
      !dataViews ||
      !dataViews[0] ||
      !dataViews[0].categorical ||
      !dataViews[0].categorical.categories ||
      !dataViews[0].categorical.categories[0].source ||
      !dataViews[0].categorical.values
    )
      return viewModel;

    //Saving JSON object in vars
    let categorical = dataViews[0].categorical;
    let category = categorical.categories[0];
    let dataValue = categorical.values[0];

    let barChartDataPoints: BarChartDataPoint[] = [];
    let dataMax: number;

    let colorPalette: IColorPalette = host.colorPalette; //Change to colors ?
    let objects = dataViews[0].metadata.objects;
    let barChartSettings: BarChartSettings = {
      //setting settings
      enableAxis: {
        show: getValue<boolean>( //method in objectEnumerationUtility.ts
          objects,
          "enableAxis",
          "show",
          defaultSettings.enableAxis.show
        )
      },
      generalView: {
        opacity: getValue<number>( //method in objectEnumerationUtility.ts
          objects,
          "generalView",
          "opacity",
          defaultSettings.generalView.opacity
        )
      }
    };

    for (
      //Going through each datapoint
      var i = 0,
        len = Math.max(category.values.length, dataValue.values.length);
      i < len;
      i++
    ) {
      let defaultColor: Fill = {
        //defining defaultColor of datapoint
        solid: { color: colorPalette.getColor(Colors[i] + "").value }
      }; //Colors[i] + "").value

      barChartDataPoints.push({
        //Pushing datapoints into array
        category: category.values[i] + "",
        value: dataValue.values[i],
        color: getCategoricalObjectValue<Fill>(
          category,
          i,
          "colorSelector",
          "fill",
          defaultColor
        ).solid.color,
        selectionId: host
          .createSelectionIdBuilder()
          .withCategory(category, i)
          .createSelectionId()
      });
    }

    //Saving max value in var
    dataMax = <number>dataValue.maxLocal;

    //Returning newly constructed VisualData
    return {
      dataPoints: barChartDataPoints,
      dataMax: dataMax,
      settings: barChartSettings
    };
  }

  /**
   * The barChart class.
   * 
   * @class
   */
  export class secondTry implements IVisual {
    private svg: d3.Selection<SVGElement>;
    private host: IVisualHost;
    private selectionManager: ISelectionManager;
    private xAxis: d3.Selection<SVGElement>;
    private barContainer: d3.Selection<SVGElement>;
    private barChartSettings: BarChartSettings;
    private barChartContainer: d3.Selection<SVGElement>;
    private barDataPoints: BarChartDataPoint[];
    static Config = {
      xScalePadding: 0.1,
      solidOpacity: 1,
      transparentOpacity: 0.5,
      margins: { top: 0, right: 0, bottom: 25, left: 30 },
      xAxisFontMultiplier: 0.04
    };

    /**
     * Creates barChart-instance.
     * @param options Reference to element that will contain the visual.
     */
    constructor(options: VisualConstructorOptions) {
      //Setting a host: Contains various services for visual (color, createSelectionIdBuilder/Manager, allowInteraction)
      this.host = options.host;

      //Creates a selection manager: Notifies if something was selected
      this.selectionManager = options.host.createSelectionManager();

      //Creates "svg" element on site and saves it in var
      let svg = (this.svg = d3
        .select(options.element)
        .append("svg")
        .classed("barChart", true));

      //Creates "g" element and classes it barContainer/xAxis, saves it in var
      this.barContainer = svg.append("g").classed("barContainer", true);
      this.xAxis = svg.append("g").classed("xAxis", true);
    }

    /**
     * Updates state of visual when changed.
     * @param options Reference to datapoints/container.
     */
    @logExceptions()
    public update(options: VisualUpdateOptions) {
      //getting the viewModel with visualTransform -> Creates valid datapoints for visual
      let viewModel: BarChartViewModel = visualTransform(options, this.host);
      let settings = (this.barChartSettings = viewModel.settings);
      this.barDataPoints = viewModel.dataPoints;

      //getting viewport sizes
      let width = options.viewport.width;
      let height = options.viewport.height;

      //setting correct sizes to visual
      this.svg.attr({ width: width, height: height });

      //if enableAxis.show == true
      if (settings.enableAxis.show) {
        let margins = secondTry.Config.margins;
        height -= margins.bottom; //Höhe um untere Margin verkleinern
      }

      //Correcting font-size
      this.xAxis.style(
        "font-size",
        d3.min([height, width]) * secondTry.Config.xAxisFontMultiplier
      );

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

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

      //Creating xAxis?
      let xAxis = d3.svg.axis().scale(xScale).orient("bottom");
      //Moving x-Axis down by {height} pixels
      this.xAxis.attr("transform", "translate(0, " + height + ")").call(xAxis);

      //Selecting all .bar elements into barContainer and saving in var
      let bars = this.barContainer.selectAll(".bar").data(viewModel.dataPoints);
      //Placeholder nodes
      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, //Fat Arrow means function. "function d returns d.color". Doesn't have own "this"
        "fill-opacity": viewModel.settings.generalView.opacity / 100
      });

      let selectionManager = this.selectionManager;
      let allowInteractions = this.host.allowInteractions;

      //Must be anonymous function isntead of =>, d3 uses 'this' as ref to clicked obj
      bars.on("click", function(d) {
        // Allow selection only if the visual is rendered in a view that supports interactivity (e.g. Report)
        if (allowInteractions) {
          selectionManager.select(d.selectionId).then((ids: ISelectionId[]) => {
            bars.attr({
              "fill-opacity":
                ids.length > 0 //If length of id is > 0, then transparent, else solid
                  ? secondTry.Config.transparentOpacity
                  : secondTry.Config.solidOpacity
            });
            //Setting clicked obj solid
            d3.select(this).attr({
              "fill-opacity": secondTry.Config.solidOpacity
            });
          });

          (<Event>d3.event).stopPropagation();
        }
      });

      //Remove elements with no data
      bars.exit().remove();
    }
    /**
* Enumerates through the objects defined in the capabilities and adds the properties to the format pane
*
* @function
* @param {EnumerateVisualObjectInstancesOptions} options - Map of defined objects
*/
    @logExceptions()
    public enumerateObjectInstances(
      options: EnumerateVisualObjectInstancesOptions
    ): VisualObjectInstanceEnumeration {
      let objectName = options.objectName;
      let objectEnumeration: VisualObjectInstance[] = [];

      switch (objectName) {
        case "enableAxis":
          objectEnumeration.push({
            objectName: objectName,
            properties: {
              show: this.barChartSettings.enableAxis.show
            },
            selector: null
          });
          break;
        case "colorSelector":
          for (let barDataPoint of this.barDataPoints) {
            objectEnumeration.push({
              objectName: objectName,
              displayName: barDataPoint.category,
              properties: {
                fill: {
                  solid: {
                    color: barDataPoint.color
                  }
                }
              },
              selector: barDataPoint.selectionId
            });
          }
          break;
        case "generalView":
          objectEnumeration.push({
            objectName: objectName,
            properties: {
              opacity: this.barChartSettings.generalView.opacity
            },
            validValues: {
              opacity: {
                numberRange: {
                  min: 10,
                  max: 100
                }
              }
            },
            selector: null
          });
          break;
      }

      return objectEnumeration;
    }
  }

  /**
   * Logging exceptions for debugging purposes.
   * @function
   */
  export function logExceptions(): MethodDecorator {
    return function(
      target: Object,
      propertyKey: string,
      descriptor: TypedPropertyDescriptor<Function>
    ): TypedPropertyDescriptor<Function> {
      return {
        value: function() {
          try {
            return descriptor.value.apply(this, arguments);
          } catch (e) {
            console.error(e);
            throw e;
          }
        }
      };
    };
  }
}

.tmp/precompile/visualPlugin.ts:

module powerbi.visuals.plugins {
    export var secondTry907B5A8A17DF4B48A41E2DB3737B35D8_DEBUG = {
        name: 'secondTry907B5A8A17DF4B48A41E2DB3737B35D8_DEBUG',
        displayName: 'secondTry',
        class: 'secondTry.ts',
        version: '1.0.0',
        apiVersion: '1.7.0',
        create: (options: extensibility.visual.VisualConstructorOptions) => new powerbi.extensibility.visual.secondTry907B5A8A17DF4B48A41E2DB3737B35D8.secondTry.ts(options),
        custom: true
    };
}